Page 1 of 1

Text Animation Timing problems

Posted: Mon Aug 08, 2022 8:37 pm
by ptlycldy
This is my first attempt in using text over an image in a carousel. I have discovered there are a multitude of places where the animation duration/delay and iterations are set. I have used the "Northern Lights" template (top image) to try to figure out how to make things work, but I have two lines of text on separate images that keep repeating. I just want the text to slide in once, each time the image in the carousel rotates an image in place.
Is there a matrix or list or tutorial (crib notes) that shows where all the setup boxes are and what values must be set to affect such a common animation?

Thanks for your help.

Re: Text Animation Timing problems

Posted: Tue Aug 09, 2022 4:23 am
by Pablo

Re: Text Animation Timing problems

Posted: Wed Aug 10, 2022 6:46 pm
by ptlycldy
Thanks for your reply, Pedro. I'm sorry for the delay responding--had major internet problems.

I had seen and been trying to use that tutorial, but the Carousel Object setup boxes have been changed-- I am using the latest WBv17. I think the events setup box--step 5--is now found in Carousel->General->Slide#->Edit->Events->Event but instead of Activate[01] the choice is only activate. Finally when you back one setup to Events to get to something similar to Step 6 there is no way to differentiate the Activate (ie. Activate[01] vs Activate[02].

Long and the short of it: when I added the additional hides for each slide in your Step 6, the texts in the 2nd and 3rd slides disapeared.

I have posted an illustration of the problem at http:\\ancodptest.epizy.com as the original setup without the additional hides.

Again, thanks for your help.

Re: Text Animation Timing problems

Posted: Wed Aug 10, 2022 7:51 pm
by ptlycldy
Sorry All-- The web page is at http:\\ancodptest.epizy.com

and the .wbs file can be found at http:\\ancodptest.epizy.com\TestNewPage.wbs

Re: Text Animation Timing problems

Posted: Wed Aug 10, 2022 8:12 pm
by Pablo
It's important to understand how CSS animations work: an animation animates the properties of an element from one state to another. For example, a slide animation translates the position of the element.
So, 'begin state' of the element needs to be correct otherwise the animation does not do anything.

If you check out the demo project of the tutorial then you will see that each slide not only applies a 'show' animation, but it also has an 'hide' animation to make sure the element's default state is restored for the next time the animation is triggered.

Note that this is not specific to the software, CSS animation is standard HTML functionality. WWB is just a 'shell' around this functionality. it does not control how it works.