PointC

Hi @aaron4osu

Welcome to the forum.

If this project is a bit overwhelming, I'd suggest going to the Learning Center and starting a bit smaller.

That being said, you'd want to use a timeline and stagger to achieve the emptying of each bowl. Here's a quick fork showing what I mean.

See the Pen 5a996bf1d6d02a00fd9215ea71bab039 by PointC (@PointC) on CodePen

Obviously the images are not hitting the target correctly (as you noted). That will mainly be a CSS issue. If you want to use divs like that, you'll need to make some calculations about how far away the middle bowl is and listen for resize events. Another option would be to place all of the elements in an SVG and then everything scales together so you can use hard coded values.

If you want the final product to look exactly like the filled bowl, you may want to work backwards and use .from() tweens. Lots of options are possible, but as I mentioned, you may want to start with something a little easier after you've gone through the Learning Center.

Happy tweening.

Looking good. 👍

Some other examples.

See the Pen XWXvpBd by PointC (@PointC) on CodePen

See the Pen pydXLG by PointC (@PointC) on CodePen

Tutorials.

https://www.motiontricks.com/svg-masks-and-clippaths/

https://www.motiontricks.com/invert-svg-text-with-a-mask/

Happy tweening.

Thanks for the demo. My advice from above would stand. I'd probably just use a .fromTo() tween in that ScrollTrigger timeline. 

I'd also recommend scaling the text element rather than the whole container. You can see horizontal scrollbars appear when you scale the whole thing. Just my two cents. YMMV

Happy tweening.

Hi @willdzoan31

Welcome to the forum.  

You are correct. That jump is because of the first tween.

Some solutions:

• Create your ScrollTrigger in a function that is called when the first tween completes.
• Wrap your target in another element and scale that one in the ST tween.
• Use a fromTo for the ScrollTrigger tween (1 → 4)

That's my best advice without actually seeing the code in context with a minimal demo.

Happy tweening 

Just to throw my two cents out there - some CodePen accounts to bookmark and/or follow.

Talented coders that feature a ton of GSAP:

Cassie Evans: https://codepen.io/cassie-codes
Blake Bowen: https://codepen.io/osublake
Carl Schooff: https://codepen.io/snorkltv

Pete Barr: https://codepen.io/petebarr

Steve Gardner: https://codepen.io/ste-vg

Ryan Mulligan: https://codepen.io/hexagoncircle

Tom Miller: https://codepen.io/creativeocean

Chris Gannon: https://codepen.io/chrisgannon

Darin Senneff: https://codepen.io/dsenneff

Craig Roblewsky: https://codepen.io/PointC/ (this guy is awesome 🤣)

It may not be exactly what you need, but there should some good inspiration in those accounts.

Happy tweening.

There are a few problems here.

• Your trigger element (.hp-360) doesn't exist
• There are several elements with CSS transitions
• Your start and end are both set to "35% 70%", but you have scrub set to true

If you decide which element should be the trigger and remove the CSS transitions on everything GSAP will be animating, I think you'll be good to go.

Happy tweening.

Hi @Tanvi_Patel

Welcome to the forum.

The moving background is a series of seamless repeating SVGs. Here's a thread with seamless clouds using the same technique.

The animated stag is a sprite sheet.

 That should get you pointed in the right direction.

Also be sure to visit the Learning Center to help you get started.

Happy tweening.

Welcome to the forum @antomopozzap.

You've marked this as solved. So, you don't need any further help?

If you do, providing a minimal demo will get you the best answers.

Happy tweening.

I see some flicker in most browsers as the text comes to a stop. You can try the usual tricks - slight rotation or maybe will-change.

I'd also recommend using ScrollSmoother rather than Locomotive.

https://greensock.com/scrollsmoother/

Correct - the duration of a tween doesn't make much difference with scrub. It's all about ratios. Two 1 second tweens on a scrub timeline will be the same as two 10 second tweens on a timeline. (Each taking up 50% of the scroll distance) However, changing just one of them to 10 seconds will make a big difference.  Now, the 1 second tween is only taking up approximately 9% of the scroll distance while the 10 second one is take up approximately 91% because we have a total of 11 seconds.

My personal preference is to use linear eases on scrub tweens/timelines, but yes you can certainly use a custom ease on a scrub tween if that's your preference. I'd say just give it a try and see what what works.

Happy tweening.

I don't think there's anything wrong with the way you did it and a few extra ScrollTriggers aren't going to make a noticeable difference. Jack is a performance connoisseur so I trust GSAP and don't get too wrapped up in all things performance until I notice something chugging along. That's almost always going to be a rendering issue though. 

The yoyo tween I posted above will have a brief period of time with nothing changing. That's why there is a repeat delay. Say you have the above code with a 1 second tween duration and a 2 second repeat delay. That's a total of 4 seconds. So, the first 25% of the scrub will be the tween to full opacity. 25% → 75% of the scrub is nothing as that is the delay. Then 75% → 100% would be the fade back to the original opacity.

Make sense?

Happy tweening.

Are you asking the same thing as your other thread here?

If you want the opacity to fade in on each repeat, you'd need to add it to the smoke timeline. Right now you have it in the setTimeout function. Why not just make it part of the main smoke timeline?

I'm pretty sure killTweensOf will indeed kill the associated ScrollTrigger. Though, any ScrollTriggers associated with timelines will remain. It's easy enough to kill all the ScrollTriggers if needed.

  ScrollTrigger.getAll().forEach((t) => {
    t.kill();
  });

Happy tweening.

You can do it like that or you could use a yoyo tween. Something like this should work:

const anim = gsap.to(containerRef.current, {
  opacity: 1,
  ease: "none",
  yoyo: true,
  repeat: 1,
  repeatDelay: 2,  
  scrollTrigger: {
    trigger: containerRef.current,
    start: "top center",
    end: "bottom center",
    scrub: true
  }
});

Happy tweening.

Glad to help and don't worry about overcomplicating it. It happens to all of us.

Happy tweening.

Yes - it's a good practice to use the most up-to-date version of GSAP and syntax. Sometimes a bug may have been squashed or a cool new feature was added so it's something to watch. 

Happy tweening.

4 minutes ago, Poylar said:

Basically my question is how do I start the opacity animation when the x-axis movement going to complete

I think you're looking for the position parameter. This will allow you to start the opacity fade before the x movement completes.

Happy tweening.

I see. I think it would just be a matter of disabling or enabling the ScrollTriggers with your control button. Something like this should work.

See the Pen 3cdce484c18fcfc71a262b3dd83e8a54 by PointC (@PointC) on CodePen

Happy tweening.

So you want all the lines triggered by ScrollTrigger but also want a pause control? Do I understand that correctly?

Hi @soma 

Welcome to the forum.

Probably easiest to create a tween for each one and play/reverse on mouseenter/leave. Maybe something like this.

See the Pen 81af104f98ab206012f97eab84edc8b9 by PointC (@PointC) on CodePen

Happy tweening and welcome aboard.

If I'm animating it with GSAP, I always use GSAP to set everything so we don't encounter any CSS problems. In this case, I think it'll be easier to use SVG origin for the head group rotation point.

See the Pen 3563d3883888a9bb19bc96e7fb6a9774 by PointC (@PointC) on CodePen

2 hours ago, Viktor Borítás said:

in Firefox, you may also notice an unwanted motion (artifact?) of the robot head

I'm not seeing that in any browser.

Happy tweening. 

Hi @chailandau 

The problem is you're drawing to true, but the lines are already drawn so it looks like nothing is happening. You could set all the paths to 0 or use a from tween as I've done in this fork.

See the Pen c7c885cb4d645c1560429fc7574fd3e8 by PointC (@PointC) on CodePen

Happy tweening.

You can drop the duration to get something quicker to avoid the ghosting of the prior image and then adjust the stagger to your liking.

See the Pen e2610efcbdf13b2eef10db071f8e6f91 by PointC (@PointC) on CodePen