[Simple looped 'pulse ripple' effect - what am I doing wrong?]

In addition, I think recapping on what 'yoyo' really means is useful, it counts as a separate tween(?)

 

I was approaching it as yoyo means run it forward then back and it all counts as 1 'run through'.

 

So doing that repeat: 1 in the stagger object in the first example is what I was missing as well.

[Simple looped 'pulse ripple' effect - what am I doing wrong?]

Thank you akapowl, both solutions solve my issue.

 

The first is clean but the second was how I was thinking of it, but I was doing a 2nd timeline instead of just a 2nd tween and also missing the positon parameter if I remember right.

 

And yes, I will make any furture pens forkable, I didn't notice the private setting was on, thanks.

 

For me, GSAP is something I won't need to use for a while, then suddenly a project needs it and you're back in it - bang! Whilst it is easy to pick back up again, some of the basics get rusty.

 

Thanks again!

 

[Simple looped 'pulse ripple' effect - what am I doing wrong?]

 Hi, this has been driving me a little bit mad as it seems so simple, I get so close, but I think I'm just one line or setting away.

 

The codepen demo best shows where I'm at.

 

For each circle I need to go, scale up, scale down, stagger each one, stop at the end, wait for 1 second, do it all again.

My codepen is almost there, just doesn't scale them back down.

 

I've tried nested timelines to handle the grow and shrink, yoyo in various places - which isn't quite right as it pauses after each play/direction.

 

Any help would be greatly appreciated.

 

Thanks so much!

See the Pen 64ed03293b8eabbdb7ecd44621132395 by delarge (@delarge) on CodePen

[ScrollTrigger offscreen reset technique ignoring scrub]

Hi, is it possible to get the ScrollTrigger offscreen reset technique (good demo on another post) working with scrub?

 

My code, which almost works, is:

 

const anim_supersonic_image_1 = gsap.from("#supersonic-image-1", {
  opacity:0,
 x: 80,  
 duration:1,
  ease: "back(1)",
  paused: true,
  scale: 1.1,
  perspective: 250,
  rotateX: -15,
  rotateY: 30,

})   
  
const play_anim_supersonic_image_1 = ScrollTrigger.create({
   trigger: "#supersonic-image-1",
    scrub: 1, // <---- BEING IGNORED
    start:"top 70%",
  onEnter: () => anim_supersonic_image_1.play()
});

const reset_anim_supersonic_image_1 = ScrollTrigger.create({
  trigger:'#supersonic-image-1',
  onLeaveBack: () => anim_supersonic_image_1.pause(0)
});

 

See my note about 'BEING IGNORED'?

Where am I going wrong here?

 

Many thanks!

 

[Long page using ScrollTrigger and skipping past sections with anchor links]

Thank you, Carl! Brilliant and very helpful video as always.

 

toggleActions: "play complete reset reset" is what I'm after in this instance (of course!), but great to know those other options are there.

[Long page using ScrollTrigger and skipping past sections with anchor links]

Firstly, apologies if this has already been asked, I tried to find previous posts but suspect I wasn't looking for quite the correct terms.

 

I have a loooong page using a mixture of regular ScrollTrigger animations + timelines - but I also have a fixed menu at the side that jumps you down to various anchor linked sections.

 

So if someone starts the page and clicks the link to #section-5, can I stop all the animations on the way from the top to bottom from firing?

 

Many thanks!