mikel

Hey @mustdie96,
 
something like this?
 

See the Pen VwjLVqW by mikeK (@mikeK) on CodePen
 
Happy looping ...
Mikel
 
 

Hey @krisxtina,
 
Welcome to the GreenSock Forum.

Here is an accordion concept.
Both tweens start at the same time (see position parameter)
 

See the Pen XWjGxxR by mikeK (@mikeK) on CodePen
 
Does it help you?
 
Happy tweening ...
Mikel

Hey @Filip3000,
 
As a SVG fan, I'll send this version into the race.
And: You can also pin another object - including the body.
 

See the Pen KKaOPey by mikeK (@mikeK) on CodePen
 
Here another example 'to pin or not to pin'
 

See the Pen c27a129d4e591657ee2eb7bc85a1774b?editors=1010 by mikeK (@mikeK) on CodePen
 
Happy pinning ...
Mikel

Hey @GSAP Fan,
 
Welcome to the GreenSock Forum.
 
You could use a timeline and move both elements.
 
gsap.timeline({ scrollTrigger: { trigger: galleryContainer, invalidateOnRefresh: true, pin: true, scrub: 1, end: () => "+=" + galleryContainer.offsetWidth } }) .to(galleryContainer, { x: () => -(galleryContainer.scrollWidth - document.documentElement.clientWidth) + "px", ease: "none", }) .to('.text', { x: () => (galleryContainer.scrollWidth - document.documentElement.clientWidth) + "px", ease: "none", },0)  
Happy scrolling ...
Mikel

Hey @DELACHPL,
 
Welcome to the GreenSock Forum.
 
You could select the relevant elements for each section.
 

See the Pen GRrORPr by mikeK (@mikeK) on CodePen
 
Happy tweening ...
Mikel
 

Hey @buster808,
 
If #bus has a width of 500px (see CSS)
Set it position: absolute;  left:-500;
The trigger should be #bus
and the x-transform end: width  + 500;
Use a correct ease - I prefer 'none'
I modified start and end values
 

See the Pen WNRoBym?editors=1010 by mikeK (@mikeK) on CodePen
 
Happy tweening ...
Mikel

Hey @Lichay,
 
Do you expect such a 'timing'?
 

See the Pen mdOWomE?editors=0010 by mikeK (@mikeK) on CodePen
 
Here another example: different durations and positions
 

See the Pen qBqrgLL by mikeK (@mikeK) on CodePen
 
Happy tweening ...
Mikel

Hey @Narendra,
 
Do you want this sequence?
 

See the Pen oNYLryq?editors=1010 by mikeK (@mikeK) on CodePen
 
Happy tweening ...
Mikel
 

Hey ZACH,
 
It was more of 'special' fun.
The question here: Why doesn't GREEN 'stop' precisely at the HIT?
 
I can't understand Cindy´s problem with ease.
 

See the Pen abBZJyQ by mikeK (@mikeK) on CodePen
 
Happy tweening ...
Mikel
 

Hey @midnightgamer,
 
Because divs are block-level elements they will automatically expand to the width of their parent:
In the span element, the text will be wrapped / 'unwrapped' if the width is appropriate.
So set a concrete width for the span element or white-space: nowrap
 

See the Pen jOVqzqE by mikeK (@mikeK) on CodePen
 
Happy tweening ...
Mikel

Hey @Michael31,
 
You trigger the section trigger: '.pinSection' and you should pin the element pin: '.pinElmt'
 

See the Pen QWGyQKo by mikeK (@mikeK) on CodePen
 
Happy pinning ...
Mikel

Hey @Dastan
 
Welcome to the GreenSock Forum.
 
My interpretation:
scrubbing (0.3) without pinning start: e.g. 200px below the top of viewPort end: e.g. 550px that corresponds to the distance from the first to the third box (if necessary, you can use a function to adapt this to different window heights) onUpdate: you can log the progress. Since the duration of the scrubbed animation is 1, you can position the corresponding 'fade in' animation (CSS: visibility: hidden) analogously to the appropriate progress. once: If this animation should only run once, use once: true
See the Pen PobPrpw by mikeK (@mikeK) on CodePen
 
Happy tweening ...
Mikel
 

Hey @D.Cus,
 
Welcome to the GreenSock Forum.
 
You could use a fromTo tween
 
.fromTo(".theLine", {drawSVG: '100%'}, {drawSVG: '100% 100%'}, 0) //Use either percentages or absolute lengths. //If you use a single value, 0 is assumed for the starting value, so "100%" is the same as "0 100%" and "true". //Use a space-delimited value to define a segment like "40% 60%".  
Happy tweening ...
Mikel
 

Hey @artstyle,
 
It could also be solved that way
 

See the Pen jOVENyV?editors=1010 by mikeK (@mikeK) on CodePen
 
Happy tweening ...
Mikel
 

Hey @midnightgamer,
 
Just use onUpdate to check the progress, choose the point which fits and ...
 

See the Pen mdObvvr?editors=1010 by mikeK (@mikeK) on CodePen
 
The scrubbed tweens have a duration of 1.
So you can position the individual circ tweens according to the progress that fits.
 
Happy analysing cases ...
Mikel
 

Hey @saf94,
 
Welcome to the GreenSock Forum.
 
Does this example clarify your questions?
 

See the Pen XWjwMOQ?editors=0010 by mikeK (@mikeK) on CodePen
 
Happy tweening ...
Mikel

Hey @Amir-Ali-Basic,
 
Welcome to the GreenSock Forum.
 
A reduced case with neutral content is completely sufficient. For example like this
 

See the Pen oNLNVJE?editors=1010 by mikeK (@mikeK) on CodePen
 
Happy tweening ...
Mikel

Hey @Lichay,
 
Please study the best guidelines to become a ScrollTrigger expert
 
To work around this either use set immediateRender: false (like 
See the Pen KKzoVGd?editors=0010 by GreenSock (@GreenSock) on CodePen
 shows) or use .fromTo()s for the later tweens (like  See the Pen LYNzrXb by GreenSock (@GreenSock) on CodePen
 shows) or set a ScrollTrigger on a timeline and put the tweens in that timelines instead (like  See the Pen jOqGKXJ by GreenSock (@GreenSock) on CodePen
 shows).  

See the Pen RwGEyMy?editors=1010 by mikeK (@mikeK) on CodePen
 
Happy tweening ...
Mikel

Hey @aok,
 
'Toggling' a reversed timeline shouldn't be a problem here.
 

See the Pen oNLNVJE?editors=1010 by mikeK (@mikeK) on CodePen
 
Happy tweening ...
Mikel
 

Hey @Samsky,
 
You need a concrete width, animate the height and not the width and ideally with a  .from tween
 
// css .nav { position: absolute; width: 100%; height: 100%; ... } // js t1.from(".nav", 1.5, { height:'0%', ease: Expo.easeInOut, y: '0%', // ease: Back.easeOut });  
Happy tweening ...
Mikel

Hey @David Aragon,
 
Welcome to the GreenSock Forum.
 
'Trigger the animation just "while" I'm scrolling':  Do you expect this effect?
 
See the Pen GRjXgRL by mikeK (@mikeK) on CodePen

 
Happy tweening ...
Mikel
 

Hey @JayShukla,
 
In your case, it could be more convenient to calculate the positions and use .from tweens
 

See the Pen ExgRxjX by mikeK (@mikeK) on CodePen
 
happy tweening ...
Mikel

Hey @james182,
 
CustomWiggle is a variation of CustomEase that lets you set the wiggle amount and type.
This URLs  points  to a special trial version of the Club GreenSock bonus plugins - you need both!
https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CustomEase3.min.js
 
Happy wiggling ...
Mikel
 

Hey @sixtillnine,
 
You can also define most normal ScrollTrigger values like start, end, etc.
 

See the Pen OJXpojK by mikeK (@mikeK) on CodePen
 
Happy batching ...
Mikel
 

Hey @mchimaaa,
 
Welcome to the GreenSock Forum.
 
See the DOCs of GSAP ScrollTrigger
 
scroller String | Element - By default, the scroller is the viewport itself, but if you'd like to add a ScrollTrigger to a scrollable <div>, for example, just define that as the scroller. You can use selector text like "#elementID" or the element itself.  
And: a scrollable <div> needs some content which is 'heigher' so it makes sense.
 
Happy scrolling ...
Mikel