Animations not working for me


#1

I do not generally play around with animations too much however on this particular project i would like to use the inview animation to fade an image in when the image has entered the view port by 10%.

I clicked an image in my App Structure that was very far down the page, about 1000px out of the viewport, added a dynamic attribute of inview animation, Name: Fade In with a Start of 10% visible.
I would expect to scroll down and see no image until 10% of the image is scrolled to, then I would expect the image to fade in to 100% visible once i scroll further.

The image never fades though and is always just visible no matter what the scroll position, is there something I am missing or is this currently not working?
Page: https://www.africacollectionbs4.com/
Element is a massive black rectangle with logos in it at the bottom of the page, set to Fade In 90% visible for testing purposes.


#2

Hi Paul, just curious as to if you tried a higher view percentage just to test if it is actually fading in. You may . also need to slow down the fade.


#3

Thanks @brad, I tried quite a few different animations for the Inview Dynamic Attribute but there are no other settings really available like fade time, delay, etc. Mine has 2 settings only, Name: where you choose the type of animation and Start which has from 10% to 100% available to select. I have probably tried every combination of settings in there, but I do not think it is doing anything to be honest.


#4

Just for information, I just tried this on a brand new page with loads of dummy information and it is still not working, and this test page is literally just a few rows and columns with some headings and tables in it, nothing difficult or fancy at all.


#5

Hi Paul,
On the link you provided i see no include files related to animate component.


#6

hmm, i see, that makes sense, so do you think it is a bug that is not adding the animation includes to the document head?
I also see that in my directory structure there is no mention inside dmxAppConnect of an animation component.

Would you mind giving me the code I could add to the document head manually?


#7

As soon as you add dynamic attributes > animation > inview - the css and js files are added on the page.


#8

Not for mine unfortunately, i even tried on a brand new page and nothing is added to the head or to the directories?


#9

Are there any errors or logs in the terminal window when you try adding animations on new pages?


#10

I just tried on another new page and I do not see anything in the logs, should i do a quick video?


#11

Here is a quick video just incase.

inview-animation-debug.mp4 (48.7 MB)

Please Note: To anybody watching, I am aware this would not really work in real life as i added an inview to the first element on the page so it is always inview, but for testing purposes this should be sufficient.


#12

Fixed in version 1.6.3, thank you Wappler.


#13

#14