Vertical Text Slider First Load Problem (Question)

[sawacrow]

Hello,

 i want to do loop-vertical text slider.

i did it but I have error on first screen. 

The numbers seem to be nested, and after the first boot, it gets better.
//GSDevTools.create();
When I run the command, the problem is solved but I cannot detect the error.
They should come with opacity:0 on first boot because CSS is defined.

( The problem is fixed in the 2nd round. )

 

(

by the way, I like the codepen script below, but it was written in gsap 2.0. I couldn't upgrade to 3.0 so I rewrote it.
https://codepen.io/sawacrow/details/ZEMNZWY

)

 

Question 2:

when the animation on the first line is loop, so that it starts as the last animation starts, i.e.
The "<" operator does not work because there is no element before it.
how can i solve this?

 

 

tl2.fromTo(".anim-text h1", {opacity: 0, y: -100}, {opacity: 1, y: 0, duration: 1, ease: ease}, "<");
tl2.fromTo(".anim-text h1", {opacity: 1}, {opacity: 1, duration: 1, ease: ease});
tl2.fromTo(".anim-text h1", {opacity: 1, y: 0}, {opacity: 0, y: 100, duration: 1, ease: ease});
tl2.fromTo(".anim-text h2", {opacity: 0, y: -100}, {opacity: 1, y: 0, duration: 1, ease: ease}, "<");
tl2.fromTo(".anim-text h2", {opacity: 1}, {opacity: 1, duration: 1, ease: ease});
tl2.fromTo(".anim-text h2", {opacity: 1, y: 0}, {opacity: 0, y: 100, duration: 1, ease: ease});
tl2.fromTo(".anim-text h3", {opacity: 0, y: -100}, {opacity: 1, y: 0, duration: 1, ease: ease}, "<");
tl2.fromTo(".anim-text h3", {opacity: 1}, {opacity: 1, duration: 1, ease: ease});
tl2.fromTo(".anim-text h3", {opacity: 1, y: 0}, {opacity: 0, y: 100, duration: 1, ease: ease});

 

See the Pen YzObbpg by sawacrow (@sawacrow) on CodePen

[akapowl]

Hello  @sawacrow

 

You have a bunch of .fromTo() tweens on that timeline, targetting the same properties of the same element, so you might want to have a look at immediateRender.

 

I set it to false as a default for every tween of your timeline, and it looks way better that way.

 

Alternatively, what you could also do, is to set the timeline to paused initially, and then after you have created it set its progress to 1, then back to 0 and then play it, but that is more of a warkaround, and I would suggest getting familiar with the immediateRender property instead, as it wil come in very handy in lots of scenarios like this.

 

Hope that will clear things up a bit. Happy tweening.

 

See the Pen gOdJJGb by akapowl (@akapowl) on CodePen

 

 

 

Edit:

I only just now saw, you edited your post with another question.

 

With regard to that second question, @Carl's tutorial on staggered staggers and especially the 'follow up' on seemles looping might be of interest for you.

 

For a more in depth dive into GSAP basics, tips and tricks, consider checking out his full courses - he's a great teacher and those are invaluable ressources.

 

https://www.creativecodingclub.com/bundles/creative-coding-club

 

 

 

https://www.snorkl.tv/staggered-staggers-for-enter-and-leave-animation-sequences-gsap-3/

 

 

 

 

https://www.snorkl.tv/greensock-staggers-with-seamless-loops/

 

 

[sawacrow]

1 hour ago, akapowl said:

Hello  @sawacrow

 

You have a bunch of .fromTo() tweens on that timeline, targetting the same properties of the same element, so you might want to have a look at immediateRender.

 

I set it to false as a default for every tween of your timeline, and it looks way better that way.

 

Alternatively, what you could also do, is to set the timeline to paused initially, and then after you have created it set its progress to 1, then back to 0 and then play it, but that is more of a warkaround, and I would suggest getting familiar with the immediateRender property instead, as it wil come in very handy in lots of scenarios like this.

 

Hope that will clear things up a bit. Happy tweening.

 

 

 

 

 

 

Edit:

I only just now saw, you edited your post with another question.

 

With regard to that second question, @Carl's tutorial on staggered staggers and especially the 'follow up' on seemles looping might be of interest for you.

 

For a more in depth dive into GSAP basics, tips and tricks, consider checking out his full courses - he's a great teacher and those are invaluable ressources.

 

https://www.creativecodingclub.com/bundles/creative-coding-club

 

 

 

https://www.snorkl.tv/staggered-staggers-for-enter-and-leave-animation-sequences-gsap-3/

 

 

 

 

https://www.snorkl.tv/greensock-staggers-with-seamless-loops/

 

 

 

hi @akapowl

Learning never ends.
It seems like a level advanced issue but it was solved with your support. Thank you hero. 

I will search for new subjects.

See the Pen xxaNNBB by sawacrow (@sawacrow) on CodePen