[matchMedia not working]

16 hours ago, GreenSock said:

The main problem is a typo - you had a lowercase "s" in ScrollTrigger.create(...)

// BAD
scrollTrigger.matchMedia(...)
                         
// GOOD
ScrollTrigger.matchMedia(...)

 

 

Beware that the way you set things up with your media queries, if the viewport is between 600px and 959px, neither animation will run. 

 

I hope that helps.

 

Hahaha... it was late!

[matchMedia not working]

I was wondering if there's anyone out there that can peep what I have to see why it's not working? 

Basically I'm just playing around and would like a box to animate to different x positions depending on the size of the window (to prevent overflow/contain the animation to the parent).

 

I'm not getting any script errors or anything, so I'm not sure what the issue is. Does matchMedia only work with advanced timelines?

See the Pen mdXdmqM by devin1229 (@devin1229) on CodePen

[toggleActions not working]

4 minutes ago, OSUblake said:

Hi devin,

 

toggleActions doesn't work when you have scrub set, and it is reversing, but your scroll start and end are pretty big, so it's reversing when it's out of view. You can see where your triggers are by setting markers: true.

 

 

 

Hmmm... so I turned off scrubbing and turned my markers on and everything appears to be set correctly. There's a start marker at the top of the section likewise for the end. Is there a better way to achieve this effect?

[toggleActions not working]

So I was playing around with the 3D banners demo by adding in some text effects.

In my working pen, I added a blur effect that triggers when it's scrolled into view. However, I want the effect to play again (scrub backwards?) when scrolling back up and I can't get that to work with the toggleActions option.

See the Pen WNddBoE by devin1229 (@devin1229) on CodePen

[Blur In/Out with Text]

Hi - I'm trying to do a little fading/blurring with text where text blurs when you scroll in. This works, but what I'd like to do is have the text "unblur" (i.e., return to its initial state) after you pass the block of text. I've been reading the documentation and it seems like it's something to do with callbacks? Maybe?

See the Pen GRyywEx by devin1229 (@devin1229) on CodePen

[Registering an Effect but with Unique Delay Values]

I clearly need new glasses. Thank you @nicofonseca and @GreenSock

[Registering an Effect but with Unique Delay Values]

I'm wondering if it's possible to use the registerEffect functionality to repeat animations, but with each animation having its own delay value. I'm trying to create a series of animations that fire off in sequence vs. all at once. I thought by using something like

        gsap.effects.pop('.circle', {
          delay: 1
        });
        gsap.effects.pop('.square', {
          delay: 5
        });

Would work, but it doesn't. Is there an alternative way to do this, or is something like this completely unavailable?

See the Pen BaRbpYq by devin1229 (@devin1229) on CodePen

[Simple Overshoot/Pop Animation]

Thank you both! I knew it had to be simple.

[Simple Overshoot/Pop Animation]

15 minutes ago, PointC said:

Hi @devin1229 

 

Welcome to the forum.

 

It should be 'ease' instead of 'easing'. Something like this should get you started.

gsap.to(".circle", {
  duration: 1,
  scale: 2,
  ease: "elastic.inOut",
  yoyo: true,
  repeat: -1
});

Happy tweening and welcome aboard.

 

 

Thanks! That gets me closer, but I need the circle to shrink back to the initial scale. The above keeps the scale as 2.
If I were using a CSS animation, it'd be something like:

 

@keyframes animation {
  
  0% {
    transform: scale(0)
  }
  
  80% {
    transform: scale(1.2)
  }
  
  100% {
    transform: scale(1)
  }

 

[Simple Overshoot/Pop Animation]

I'm new to this Greensock thing and I'm trying to create just a simple "pop" that adjusts the scale and overshoots it a bit before returning back to the original scale. Something like what's found on

See the Pen dYvLpN by Jtwa (@Jtwa) on CodePen

.

 

I've been pouring over the documentation and I'm not sure if it's using a .fromTo or something. Or do you just link a bunch of gsap.to's together?

See the Pen BaRbpYq by devin1229 (@devin1229) on CodePen