Carl

I was working on a basic example, but the article from @PointC that  @mvaneijgen mentioned will explain everything you need to know and more!
 

See the Pen mdooqQX?editors=1010 by snorkltv (@snorkltv) on CodePen

Thanks for the demo. 
In the future please add new information to new replies. Editing the first post repeatedly makes it difficult for us and others to follow the conversation.
 
I don't know enough about swiper in react to help you with this, particularly how to reference the Swiper inside the onChange callback.
 
However, this bare-bones example shows how to animate the active slide (change it's scale) and animate something inside it (rotate the number div)
 
Hopefully you can find a way to apply something similar to your project
 

See the Pen WNmzezX?editors=0011 by snorkltv (@snorkltv) on CodePen

Sorry, I'm not sure I can edit it so that you easily understand it. That's why I spend hours creating video lessons that explain everything in detail.
 
However, this is what the edited code would look like:
 

See the Pen wvOyeYO?editors=0010 by snorkltv (@snorkltv) on CodePen
 
Good luck with the rest of your project

Thanks for the demo.
 
Try setting 
 
body {   overflow-x: hidden; }  
Or you can put your <p> element in a wrapper div that has the same css.
 

See the Pen qBvNdWd by snorkltv (@snorkltv) on CodePen
 

if you want the whole wave play through and then just repeat maybe just have a timeline that repeats like so.
 

See the Pen JjzGgVY?editors=1010 by snorkltv (@snorkltv) on CodePen
 
the first time I read the question I thought each line needed their own repeatDelay.

thanks for the demo.
 
The big problem is that you are putting a ScrollTrigger on a tween in a timeline. This creates a conflict where both the timeline and ScrollTrigger are fighting for control of the tween. 
 
Please read: https://gsap.com/resources/st-mistakes/
 
Another issue is that your ScrollTrigger's star postion is "top top" which means it is active the instant the page loads.
I set it to use start:"top -1" which forces the user to scroll.
 
The demo below should basically work if the user does NOT scroll while the first animation is playing:
 

See the Pen QWzXQWE?editors=0010 by snorkltv (@snorkltv) on CodePen
 
There's unfortunately a few logic problems to work out if you want to animate an item with a timeline and also allow the user to control a tween using relative values on that item via a ScrollTrigger.  The big issue is that if the box has a margin-top of 50 while animating at first and then the user starts scrolling, then the ScrollTrigger animation will have a starting value of 50 and end value of 150.
 
You could try to prevent scrolling by setting overflow:hidden on the body during the first animation but then the page will most likely shift when the scrollbar gets added. I'd normally recommend against preventing scrolling. 
 
Also, I would stick to animating transform values like "x" instead of "marginTop". 
 
 

Perhaps this simplified demo of mine can help.
The basic idea is that your background needs to be larger than the element it is applied to.
I'm using a portrait image inside a square container which guarantees there will always be extra image to reveal
 

See the Pen gOZaoPK by snorkltv (@snorkltv) on CodePen

Each button has a data-target attribute which is the id of the element it should animate
 

See the Pen LYMopVZ?editors=1010 by snorkltv (@snorkltv) on CodePen
 
<div class="targets"> <div class="box blue" id="box3">3</div> <div class="box red" id="box1">1</div> <div class="box orange" id="box4">4</div> <div class="box purple" id="box5">5</div> <div class="box green" id="box2">2</div> </div> <div class="buttons"> <button data-target="#box5">5</button> <button data-target="#box1">1</button> <button data-target="#box2">2</button> <button data-target="#box4">4</button> <button data-target="#box3">3</button> </div> The index or order of elements no longer has any importance.
 
hope this helps

Thanks for the demo. You did a good job.
The main issue is that you aren't setting up your cycle timeline until after the headings slide in.
This caused you to see all the words on top of each other in their "pre-animated" state.
 
I did a few things 
I set the cycleWords function to return the timeline I called the cycleWords function before the main timeline was built I paused the cycleWords timeline at a time of 1 (this makes only the first word show) I changed your onComplete callback on the main timeline to tell the cycle timeline to play
See the Pen BavGPpo?editors=0010 by snorkltv (@snorkltv) on CodePen
 
 

Hi @PapaDeBeau
 
I think the main problem was just the syntax / formatting in the eventlisteners. When using multiple lines in an arrow function you need the {}
 

See the Pen eYbVPPm?editors=1010 by snorkltv (@snorkltv) on CodePen
 
item.addEventListener("mouseleave", () => { console.log("Still works") one.reverse() }); Also in your loop item is the button with a class of ".Amazing" so I don't think you need to do
item.querySelector(".Amazing"), you just need to animate each item.
 
also, be careful with from tweens on buttons. you don't want them moving away from the mouse when you enter them because then they could trigger the mouseleave immediately. 
 
Glad to hear you enrolled in the classes!
 
I'm sure if you put in the time and practice you find a wealth of information in there.
 
Carl

Hi and welcome to the GreenSock forums,
 
Thanks for the demo.
 
The right way in my opinion would be to use the MotionPath Plugin.
Here are 2 demos I used in recent lessons in my course SVG Animation with GSAP.
 

See the Pen zYyBKmG by snorkltv (@snorkltv) on CodePen
 
 

See the Pen JjwJrqq by snorkltv (@snorkltv) on CodePen
 
Hopefully these help

thx for the demo. I've never had to use this but check the ScrollTrigger docs for pinnedContainer.
 
i think setting it to "main" on the second ScrollTrigger solves your issue.
 

See the Pen MWZoEgp?editors=0010 by snorkltv (@snorkltv) on CodePen
 
be sure to thank @GreenSock for adding all these wonderful features 

update. I did end up making a complete tutorial on this effect and it's on YouTube:
 
 
Here's the finished demo too:

See the Pen 36e8db0379aa8cbac7608b0ff0d1f46d by snorkltv (@snorkltv) on CodePen
 
 

Hi and welcome to the GreenSock forums,
 
Typically it is best to provide a minimal demo showing what you have attempted. This way we can help guide you.
 
However, I had recently shared this demo with my students, perhaps it will help you get started.
 

See the Pen QWJNmQb?editors=0010 by snorkltv (@snorkltv) on CodePen
 
If you need help learning ScrollTrigger be sure to check out my comprehensive GSAP training.

I would create a single animation that has an onUpdate function that is used to update the slider value and the displayed number
 

See the Pen qBLOwZR?editors=0011 by snorkltv (@snorkltv) on CodePen
 
 
 
 

if you were to remove everything except for the motionPath animation you would see that it slows down at the end because all tweens have a default ease of "power1.out". Try using ease:"none" and see if that works better.
 
section_2.to(rec, {         motionPath: {             path: path,             align: path,             alignOrigin: [0.5, 0.5],         },         immediateRender: true, ease:"none"     })  

Hi and welcome to the GreenSock forums.
 
Thanks for the demo.
 
It looks like you are only creating 1 timeline with all the animations in it.
 
The approach I recommend is to create a timeline for each element and then that element can play and reverse its animation on enter/leave
 
here is a demo from a lesson in my Free GSAP Beginner's Course
 

See the Pen WNZLoNg by snorkltv (@snorkltv) on CodePen
 
Check out the course as it will get you up to speed with the latest syntax too.
 
TimelineLite still works but isn't recommended.
 
 

Hi and thanks for the demo.
 
A yoyo is added when you need a repeating timeline to animate forwards and backwards the same way.
 
If you want to do something different in the reverse direction then using yoyo isn't going to be a manageable solution.
 
From looking at the code you provided it looks like it's a bit over-engineered for something that should be a bit simpler.
 
Unfortunately I'm really not following exactly what should happen.
 
In a case like this I would suggest you build a single timeline that ONLY plays forward and clearly shows how everything should appear and disappear. Put all the tweens in the timeline and don't use any function calls or conditional statements to build the animations.
 
At that point we can look at it and see common patterns and then advise you on how some of it can be optimized with functions that return timelines or loops or whatever.
 
While reading your description it kind of reminded me of this lesson from GSAP 3 Beyond the Basics where dynamic content shows and hides throughout a timeline. Perhaps something like this will help
 

See the Pen XWmdPBv by snorkltv (@snorkltv) on CodePen
 
 

so in the previous version you'll notice that you have to scroll a bit before the next section slides up.
 
This means that there was some dead space in the beginning of the timeline.
 
Since the loops were skipping the first panels when i === 0 then that means the first elements to be animated were being inserted at a time of 0.5 from the (i * duration) position parameter.
 
We want the first position parameter to be zero so we can just use
 
(i-1) * duration
 

See the Pen QWzEKbm?editors=0010 by snorkltv (@snorkltv) on CodePen

As I understand your question you could use 2 ScrollTriggers. We refer to this technique as an “offscreen reset” 
 
I go over this a few times in my ScrollTrigger course, but here is a simplified demo
 

See the Pen abQdKLN by snorkltv (@snorkltv) on CodePen
 
I use the grey area to show what happens off screen but you can change those values to match the top and bottom of the viewport 
 
here’s a more advanced example where the headers all roll towards you as they enter the viewport from top and bottom using the same basic technique. They all reset to the light grey side when they leave the screen too. 
 
 

See the Pen YzvjGom by snorkltv (@snorkltv) on CodePen
 
hope this helps 
 

Hi Kwabena,
 
Glad to hear you are enrolled in my courses.
Studying these demos is a great way to increase your learning!
 
I'm guessing in this case that the developer just chose 3500 as a number that is "big enough" to work well in most cases.
 
I just made a fork that uses a "function-based value" which figures out the scrollDistance based on the width of the window * number of sections.
 

See the Pen LYMEdZb?editors=0011 by snorkltv (@snorkltv) on CodePen
 
 
This will allow the vertical scroll distance to be the same amount that things are moving horizontally.
An added bonus of function-based values when used with ScrollTrigger is that they automatically get re-calculated on window resize.
 
Be sure to open the demo in a new window and watch the console for updates after you resize.
 
hope this helps
Carl
 
 
 

ok, this turned into an afternoon of distraction 
 
After doing it first with MotionPath, I had a hunch it could be done with some math and experimentation so I came up with this

See the Pen jOQgKWX?editors=0110 by snorkltv (@snorkltv) on CodePen
 
The circular motion is caused by offsetting the transformOrigin.
 
It's pretty good. However you will always have to play with the  duration of the animations of the arcs vs the straight part as it can look bad if there is an abrupt change in speed.
 
Ultimately (as @mvaneijgen suggested) MotionPathPlugin is way cleaner as it:
will only require one tween speed is automatically kept consistent throughout  
I think most people think of MotionPathPlugin as only good for SVG animations, however it excels at applying SVG path data to HTML objects!
 
In order to figure out the path for an html element I
created a similar svg rect with rounded corners converted that rect to a path with MotionPathPlugin used that path to animate a div circle around my div button
See the Pen BaGXxrd by snorkltv (@snorkltv) on CodePen
 
This demo here copies the path value from the pen above and applies it to the div button.
I did this to show that you don't really need an svg in your final html page
 

See the Pen jOQgKNe?editors=1010 by snorkltv (@snorkltv) on CodePen
 
If you have buttons of different sizes you could use these files as guides to create a script to dynamically generate all the assets.
If you are handy with SVG path data you could also use the dimensions and radius of your button to dynamically create your own paths.
 
Somehow I feel there's some room for some future creativeCodingClub.com lessons here. 
 
 
 

thanks for the demo. this was a fun little challenge. not sure of all the requirements and I imagine this can be tackled a few ways.
hopefully this works as a starting point.
 

See the Pen dyQMZjq?editors=0010 by snorkltv (@snorkltv) on CodePen
 
Note
cards natively have position absolute in css and are stacked on top of each other at y:0 i use js to distribute them vertically (index * 200) the timeline animates them all back to y:0 (their normal position) all cards are 200px tall

Hi and welcome to the GreenSock forums,
 
Thanks so much for the demo. It definitely helped me experiment with a solution.
 
One way of doing this is to have 2 separate ScrollTriggers. One that pins the hero section and another that animates the bars.
In order to do this I had to quickly reparent the bars in another div. I also messed around with some of the position values of the bars and durations slightly.
 

See the Pen RwqNVEX?editors=0100 by snorkltv (@snorkltv) on CodePen
 
I'm sure it could use some tweaking, but hopefully you see that a big advantage of this setup is that you can adjust the end position of the pinned hero so that it can detach independent of the bars animating and you can play with the values a bit.
 
Also, it will look better when the window is taller. In the vertically challenged embed above the effect gets a bit lost.
 
For this type of effect there is nothing wrong with using different durations for the bar animations. Someday you may want to look into ScrollSmoother which has some very handy parallax capabilities built in.
 
I'm calling this the Double ScrollTrigger Pin and Parallax. It may come to a CreativeCodingClub.com lesson someday soon

cool animation. I don't understand everything about the code, the problem, or the exact solution you need. 
 
But assuming the end goal is a seamless loop try updating your loop timeline like so
 
const TRAIL_LOOP = gsap.fromTo(   TRAIL,   { time: 1.84 },   {     time : 3.69,     repeat: -1,     ease: 'none',     duration: 3,     immediateRender:false   } )  
When it it first loads it will start somewhere around halfway through and then play through to a similar looking part of the loop.
 
I got those mystery numbers by playing around with GSDevTools a bit on TRAIL.
 
Since TRAIL doesn't repeat you can animate the time() instead of totalTime(), but it doesn't really make a difference.
I got rid of what I thought might be the cause of some of the glitchiness by setting immediateRender:false on the fromTo tween.
Again, not really sure of the exact particulars. 
 
Hopefully this helps somewhat.