Animations not working for me

Wappler General Bugs
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.