[Locomotive / ScrollTrigger Integration]

Hi everyone, 

I've reviewed the codepen solution for Locomotive / ScrollTrigger Integration (

See the Pen 1dc38ca14811bc76e25c4b8c686b653d by GreenSock (@GreenSock) on CodePen

), but am having difficulty implementing a simple ScrollTrigger animation in my own case. In the attached example, I'm trying to apply a simple fade to the images on scroll. 

Thanks for your help, 

M 

See the Pen BajYYRM by euqio (@euqio) on CodePen

[Basic Wrap / Append for Marquee Effect]

Thanks for this, Zach. 

 

As always, you're a great help. But, I'm still unable to get this to work. I've tried to scope the selectors to the "ticker" instance, but lost the draggable function and still can't multiply the ticker. 

 

This is a foundational animation, so I'm using it to better acquaint myself with GSAP's syntax. 
Thanks for all! 

 

See the Pen VweQayd by euqio (@euqio) on CodePen

 

[Basic Wrap / Append for Marquee Effect]

Thanks, Zach! 

 

The examples are always helpful. But in linked examples, the individual cells have a fixed width. Is there an example with varying widths? I was able to achieve the the effect here, but I can't duplicate the animation for multiple uses on a single page. I've tried this with  "document.querySelectorAll("ul").forEach(ticker => {" but it just aggregates all the elements into single "wrapper".

 

See the Pen jOWLxdM by euqio (@euqio) on CodePen

 

Appreciate any help here.

Many thanks,
M 

[Basic Wrap / Append for Marquee Effect]

Hi everyone, 

 

I'm looking for a simple expression for the enclosed marquee. I know this is a common question, but I haven't been able to find a reduced example in GSAP v3. I have a basic tween for reference. 

I appreciate your attention, as always, 
M

See the Pen BajdWra by euqio (@euqio) on CodePen

[Sequencing a Nested Timeline]

Got it. Thanks again for your quick responses and support! 

[Sequencing a Nested Timeline]

Last question for this thread, Zach. 

 

Is there a reason why the sequence stops once I add repeatRefresh to master timeline? I assume this would reset the random elements on repeat. 

Simplified pen enclosed: 

 

See the Pen wvMzzgX by euqio (@euqio) on CodePen

 

Thanks for looking! 
M

[Sequencing a Nested Timeline]

Thank you, Zach! 

[Sequencing a Nested Timeline]

 🤦‍♂️ 

[Sequencing a Nested Timeline]

Thank you, Zach! 

 

That's what I thought, but when I change the value to absolute I lose the first sequence. 

I have a simplified pen here: 

See the Pen gOPwajg by euqio (@euqio) on CodePen

 

Thanks again for your attention! 
Really appreciate it,

M

 

[Sequencing a Nested Timeline]

Thank you, Zach! 

 

This is basically what I'm looking for! But, the second animation is placed in the relative position and animates below "No.1".  When I change the panel position to absolute, I lose animation for "No.1".

 

Is there a way to simply replace the sequence "No. 1" with sequence "No.2"? 

 

I have an updated pen here:

See the Pen gOPwajg by euqio (@euqio) on CodePen

 

Please let me know. 
Very much appreciate your attention, 
M

 

[Sequencing a Nested Timeline]

Hi again everyone, 

 

I have a simple pen with two timeline instances. Is there a way to play these in a linear sequence (from No. 1 to No. 2), rather than playing at the same time? Another newbie question, but the community response is teaching me a lot! 

 

With appreciation, 
M

See the Pen yLeaNOO by euqio (@euqio) on CodePen

[Reset Random Value on Repeat]

Perfect, Zach. 

Thanks again! Support from you and this community is truly exceptional. 
Thank you!

 

[Reset Random Value on Repeat]

Hi everyone, 

Another simple question from a newbie. How do I write a simple function to reset the random colors values for the enclosed. 

 

I appreciate your help! 
M

See the Pen yLeJaBr by euqio (@euqio) on CodePen

[Wrapping GSAP Auto-Slider Direction and Multi-Sliders?]

Thanks for the prompt feedback, Zach! 

 

I'll review the guide and appreciate the nudge on direction. I'll spend some time with utility methods next. 

Thanks for all! 
M

 

 

 

[Wrapping GSAP Auto-Slider Direction and Multi-Sliders?]

Hi everyone! 

 

A quick, perhaps easy question to answer: How to change the animateSlides(direction) here (from right to left instead of left to right)? Also curious if the slider can be wrapped for multiple sliders on a single page. Something like sliders.forEach((slider, i) => {});  

 

I appreciate your thoughts. 
With appreciation, 
M 

See the Pen RwrWVXg by euqio (@euqio) on CodePen

[ScrollTrigger with Repeated SplitText Loop]

I really appreciate your explanation, Zach. 

Will spend some time with your article and documentation. 

Thanks again! 
M

[ScrollTrigger with Repeated SplitText Loop]

Thanks for the quick response, Zach! 

 

I'm starting with a simple animation to understand the logic before elaborating a bit. The first caption DOES the correct behavior, but captions 2 and 3 do not. If you scroll to the second and third images, the captions don't trigger like the first. 

Thanks for your help! 
Very best, 
Michael 

[ScrollTrigger with Repeated SplitText Loop]

Good greetings, everyone! 

I have an enclosed pen with a simple fade on titles and images, but I can't get the SplitText element to repeat like the fade with ScrollTrigger.

Please let know if you have suggestions. 

Thanks! 
M

See the Pen MWKYzdm by euqio (@euqio) on CodePen