PointC

You can set visibility:hidden in your CSS and then set the autoAlpha when everything is ready.
 

Okay... I see - you'll have other controls that will pause/resume. That makes more sense now. Often times I'll just set up a global toggle variable that I can flip from true/false, 0/1 or whatever that I use to keep track of the timeline state. 
 
You may want to take a look at the position parameter. I think it would greatly enhance your project. Happy tweening.
 

Hi @WebDeveloper096 
 
Welcome to the forum.
 
The appearingCircles part of the timeline was just running on its own as it wasn't part of the ScrollTrigger. Moving the ScrollTrigger to the timeline vars takes care of the problem.
 
See the Pen 5fd2a6919e62d43675cabcb07f2589bf by PointC (@PointC) on CodePen

 
Happy tweening and welcome aboard.

 

You're just missing the vars object. Please give this a try.
document.addEventListener("DOMContentLoaded", () => {   gsap.to(".text", {     scrollTrigger: {       trigger: "wrapper",       markers: true     },     x: 200   }); }); Happy tweenig.

 

Please give this a whirl:
ScrollTrigger.refresh(); Happy tweening.

 

Hey @DeltaFrog 
 
If I understand your desired outcome, you'd want to add the ScrollTrigger to the timeline rather than individual tweens. There's a nice example on the ScrollTrigger docs page.
https://greensock.com/docs/v3/Plugins/ScrollTrigger
 
A minimal demo would also really help to get you the best answers.  
 
Happy tweening.

 

That looks correct.
 
Your repeats seem odd because you tween the progress of the child from 0 → 1 and then  1 → 0. At that time the child is back to the beginning so it naturally plays if it isn't paused. (using the normal durations and eases) I did not have the child paused in my first example so that may have been confusing, but I was only tweening the progress to 1 so it was already at the end and couldn't play again. I've paused it now for clarity.
 
I wouldn't recommend adding tweens to a child timeline after you've added the child to a parent as that could give some odd results. Either add more tweens to the child before you add it to the parent or make a second child.
 
You can use the index to create some conditional logic for the tweens (like in the referenced article). Function based values are pretty powerful animation techniques.  But you don't necessarily need the index and element as GSAP also has baked in randomizing too so you can do something like this.
gsap.to(yourTargets, {   duration: 1,   y: "random(-100, 100, 5)" }); I'd recommend the getting started guide
 
Our own @Carl has a wonderful course here:
https://www.creativecodingclub.com/courses/FreeGSAP3Express?ref=44f484
 
Have fun.

I think you'd just want to fire your toggleAnimation for the first (or any) target.
toggleAnimation(menus[0])
See the Pen 8c41c65452d55975167840c9e0daef37 by PointC (@PointC) on CodePen
 
Hopefully that helps. Happy tweening.

 

I don't think that will be a problem at all. The span will keep its padding. You can put it inline like your post or in the CSS like this demo. I upped the px just to make it obvious.
 

See the Pen 011a35f55d004804f75ec405534ddfb8 by PointC (@PointC) on CodePen
 
Happy tweening.

 
 

Maybe set the parent to a grid and place each child in column 1 row 1.
 
.parent {   position: relative;   outline: 6px dotted orange;   display: grid; } .childClass {   position: relative;   grid-row: 1;   grid-column: 1;    } video {   width: 100%; }
See the Pen 61a16326f62367299314b686f5e4e608 by PointC (@PointC) on CodePen
 
YMMV. Happy tweening.

 

Hi @szehao 
 
Welcome to the forum.
 
The delay you're seeing is the ease of "power4". I'm guessing you wanted something more like this with a linear or "none" ease.
 
See the Pen mdpKxdb by PointC (@PointC) on CodePen

 
I'd also recommend placing all the elements inside the SVG so everything scales nicely together.
 
Does that help?
 
Happy tweening and welcome aboard.

I'm not sure if you're talking about the MotionPath plugin or DrawSVG since your demo is using DrawSVG.
 
The problem with the demo is the path with an ID of #mask is a filled path. DrawSVG only works with strokes. You'd want an open path or a series of lines with a stroke to do that reveal with DrawSVG.
 
Happy tweening.

 

animation: gsap.to('#logo_header', {duration: 3, autoAlpha: 0, immediateRender:false}),  

I think @ekfuhrmann wanted the little target to go back to the beginning via a straight line. Kinda like this fork using a MotionPath.
 

See the Pen 2972409eda059a43f4a78b505e70d835 by PointC (@PointC) on CodePen
 
But I was think the same thing as Blake. It'll be pretty tricky since you need to reset rotations and transforms and you don't want to see any rotations as it resets. I added an inner and outer target with the outer following the MotionPath and the inner could be animated separately, but you'd need to orbit the inner target around the parent to make it work and get pretty much the same result as I had in my demo above when it goes back to the start. 
 
Personally, I kinda like the little curve as the target "goes home" as it has more of an organic feel. But maybe that's just me.
 
I'm not 100% sure about this one. 🤷‍♂️ 

Hi @dna75
 
Welcome to the forum.
 
You're creating a bit of a conflict there with two tweens fighting for control of the same property. If it were me, I think I'd simply wrap the image in a div and rotate the image on load and the div on scroll. Maybe something like this.
 

See the Pen 4d2fa7059db58c1500e9274f95256518 by PointC (@PointC) on CodePen
 
Just FYI - there is no #wrap so nothing will pin and you have some large delays in there (1000 & 5000?) I'm not sure what those are supposed to be doing. Hopefully that approach helps.
 
Happy tweening and welcome aboard.

 

Hi @GreenGiant 
 
Welcome to the forum.
 
Yep - the brush tool is gonna kick out a filled path. Not what you want here. You'd want to use the pen tool to make an open path with a stroke. You can also use the curvature too or maybe the pencil.
 
You can reveal your filled path with a mask (made with the brush) but that will require an open path with a stroke to do so with the DrawSVG plugin so you may as well make the main path with one of the tools I mentioned.
 
Does that make sense?
 
Happy tweening and welcome aboard.

Hi @jacobc1596 
 
Welcome to the forum.
 
You could use a CSS variable for that.
 
See the Pen 45a396df430219c77e4603227e3f1d89 by PointC (@PointC) on CodePen

 
Happy tweening and welcome aboard.

Hi @Taric Ov 
 
Welcome to the forum.
 
DrawSVG and SplitText are perks for Club GreenSock members.
https://greensock.com/club/
 
You can see that there are quite a few time-saving plugins available to members. IMHO it pays for itself quickly.
 
Happy tweening and welcome aboard.

 

Hi @Separator 
 
Welcome to the forum.
 
You'd want to use the position parameter to start both of the morph tweens at the same time.  Here's a fork of your pen with that change and some other updates to the GSAP3 syntax.
 
See the Pen xxpwXZg by PointC (@PointC) on CodePen

 
Happy tweening and welcome aboard.

 

Hi @AraAbc 
 
Welcome to the forum.
 
If I understand your goal correctly, I think it's just a matter of animating the background-color of the parent #Demo section. Something like this.
 
See the Pen RwxbvjN by PointC (@PointC) on CodePen

 
Hopefully that helps. Just FYI - it's better to make your pens public when you post here so they can easily be forked with changes.
 
Happy tweening and welcome aboard.

 

Hi @kcgsap 
 
Welcome to the forum.
 
I wasn't quite sure if the lines were supposed to enter one at a time or make a seamless loop like Jhey's demo. Either way, you'd want to use a clipPath (or a mask) on a group. For a line at a time, you can use a simple stagger.
 
See the Pen mdqQxrO by PointC (@PointC) on CodePen

 
For a seamless loop, you'd want to clone the group and animate the yPercent kinda like this.
 
See the Pen rNYQdGb??editors=0110 by PointC (@PointC) on CodePen

 
If you need a primer on clipPaths and masks you can check out my training site.
https://www.motiontricks.com/svg-masks-and-clippaths/
 
Hopefully that helps. Happy tweening and welcome aboard.

You'll need to seek that label after the timeline is created. Just move your seek and you'll be good to go.
// tl.seek('end'); // nope tl.to("circle", { x: 140, duration: 3 })   .to("circle", { scale: 1.2, fill: "gold", duration: 2 }, "f1")   .to("circle", { y: 40, duration: 2 }, "f1")   .to("circle", { x: 60, y: 5, scale: 0.4, duration: 2 })   .to("circle", { scale: 1 }, "end"); tl.seek('end'); Happy tweening.

 

Just my two cents but I find it much easier to use xPercent for these types of repeating scrolling animations. Here's a fork of your demo with that option. 
 

See the Pen vYWQZyX by PointC (@PointC) on CodePen
 
If you want it to reverse, just change the tween to .from xPercent:-100 rather than to. If you want it to yoyo, set yoyo to true.
 
Hopefully this helps. Happy tweening.

 

Hi and welcome to the forum @GSdaBlessedFist.
 
Is this what you needed?
See the Pen dacd3a7defb8cacc8a1556648f50b9a9 by PointC (@PointC) on CodePen

 
Happy tweening and welcome aboard..

 

Hi @buster808 
 
Looks like you're stuck with the meters. Here's a fork of your demo in which I used a forEach loop to make the animations and add a ScrollTrigger to each one. I think it should get you moving in the right direction. I used a small array for the dial values, but you can also use data attributes as @elegantseagulls mentioned above. Lots of ways to make it happen. 
 
See the Pen gOGNEOr by PointC (@PointC) on CodePen

 
Happy tweening and thanks for reading Motion Tricks.