Fade text in and move up at different times

[NoonyE]

I'm really new to this and have slowly pieced this together. 

I'm pretty sure I have way to much js at this point but I'm trying to fade in the H1 just after the bullseye circle disappears and then as that moves up, the other text fades in from the bottom of the screen and moves up to look like this:

See the Pen PodMNxw by sevans77 (@sevans77) on CodePen

[Rodrigo]

Hi @NoonyE and welcome to the GreenSock forums!

 

This thread seems related to this one:

There is enough information provided already in that particular thread as your start and end points for the first animations seem quite close to each other as the animation happens super fast. You should take the last codepen in that thread as a starting point and then try to add the functionality you're after.

See the Pen eYLwzEx by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!

[NoonyE]

Ok, figured out what was causing a lot of my issues but now I need assistance with matchmedia. Somehow I need to go from a scale of 1.99 to a scale of 1 on my #secondCircle variable. I have played around with my code for hours and I just can't make it work. 

let mm = gsap.matchMedia();

 

// add a media query. When it matches, the associated function will run

mm.add("(min-width: 800px)", () => {

 

// this setup code only runs when viewport is at least 800px wide

gsap.to("#secondCircle", 1, {

width: "100%",

paddingBottom: "100%",

borderRadius: "555%",

scale: 1,

delay: 0

});

 

mm.add("(max-width: 799px)", () => {

 

gsap.to("#secondCircle", 1, {

width: "100%",

paddingBottom: "100%",

borderRadius: "555%",

scale: 1.99,

delay: 0

});

});

});

[GSAP Helper]

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or CodeSandbox that demonstrates the issue? 

 

Keep in mind that when a particular matchMedia() doesn't match anymore, it reverts any animations/ScrollTriggers that were created inside of it. From glancing at your code, it looks like maybe you thought it's KEEP the scale from the old (non-matching) matchMedia() and just run the new one on top of that, but that's not how it works. 

 

You can, of course, use a .fromTo() tween to control both ends (start and end), so you animate scale from 1.99 to 1.

[NoonyE]

It's more like where to put that piece of code in my other code that's referenced in the codepen. 

I had it working with this but then realized that it was deprecated and was trying to integrate the new matchMedia 

 

ScrollTrigger.matchMedia({
	
  // large
  "(min-width: 960px)": function() {
    // setup animations and ScrollTriggers for screens 960px wide or greater...
    // These ScrollTriggers will be reverted/killed when the media query doesn't match anymore.
  },

  // medium
  "(min-width: 600px) and (max-width: 959px)": function() {
    // The ScrollTriggers created inside these functions are segregated and get
    // reverted/killed when the media query doesn't match anymore. 
  },

  // small
  "(max-width: 599px)": function() {
    // The ScrollTriggers created inside these functions are segregated and get
    // reverted/killed when the media query doesn't match anymore. 
  },
	
  // all 
  "all": function() {
    // ScrollTriggers created here aren't associated with a particular media query,
    // so they persist.
  }
	
}); 

[Rodrigo]

Hi,

 

I'm pretty sure that you have your code properly indented in your code editor, but right now is hard to see it with no indentation here in the thread.

let mm = gsap.matchMedia();

// add a media query. When it matches, the associated function will run
mm.add("(min-width: 800px)", () => {

  // this setup code only runs when viewport is at least 800px wide
  gsap.to("#secondCircle", 1, {
    width: "100%",
    paddingBottom: "100%",
    borderRadius: "555%",
    scale: 1,
    delay: 0
  });
  
  // HERE IS YOUR PROBLEM
  mm.add("(max-width: 799px)", () => {

    gsap.to("#secondCircle", 1, {
      width: "100%",
      paddingBottom: "100%",
      borderRadius: "555%",
      scale: 1.99,
      delay: 0
    });
  });
});

As you can see you are adding a new breakpoint to MatchMedia inside the callback of another breakpoint.

 

Maybe try this:

let mm = gsap.matchMedia();

// add a media query. When it matches, the associated function will run
mm.add("(min-width: 800px)", () => {
  // this setup code only runs when viewport is at least 800px wide
  gsap.to("#secondCircle", 1, {
    width: "100%",
    paddingBottom: "100%",
    borderRadius: "555%",
    scale: 1,
    delay: 0
  });
});

mm.add("(max-width: 799px)", () => {
  gsap.to("#secondCircle", 1, {
    width: "100%",
    paddingBottom: "100%",
    borderRadius: "555%",
    scale: 1.99,
    delay: 0
  });
});

We have a good code tool with a syntax highlighting selector for our users:

 

 

Hopefully this helps.

If you keep having issues, remember to create a minimal demo so we can take a look.

Happy Tweening!

[NoonyE]

Thanks, that makes sense, but now I'm having issues fitting it in to the codepen above without breaking my code. 

 

[NoonyE]

Figured it out! 

[Rodrigo]

That's great to hear!! 🥳

 

Let us know if you have more questions.

Happy Tweening!

[NoonyE]

Is there a cleaner way to do this. I ended up dumping all the code into each query to get it to do what I want. 

See the Pen ExdYwLv by sevans77 (@sevans77) on CodePen

[Rodrigo]

Hi,

 

As I mentioned in the other thread related to this one, there is no need to call ScrollTrigger.refresh() on a window resize event. ScrollTrigger will pickup the resize event and refresh for you. Same goes for invalidating the GSAP instance associated with a ScrollTrigger, you can instruct ScrollTrigger to do that for you with invalidateOnRefresh:

Boolean - If true, the animation associated with the ScrollTrigger will have its invalidate() method called whenever a refresh() occurs (typically on resize). This flushes out any internally-recorded starting values.

gsap.to(element, {
  scrollTrigger: {
    invalidateOnRefresh: true,
  },
});

You definitely have a lot code being repeated on both MatchMedia instances, so you could easily move some of those methods out and pass parameters to them. Same thing with the constants you're creating, just move them outside and they'll be available for the MatchMedia callbacks as they live in an global scope.

 

Also (and this I mentioned in the other thread as well) it's quite odd to attach an event listener to the window, those two methods init and resize should work as expected outside if the constants are created outside the MatchMedia callbacks as well.

 

Finally in terms of making it more concise you can use the Conditions Syntax that MatchMedia offers:

let mm = gsap.matchMedia(),
    breakPoint = 800;

mm.add({
  // set up any number of arbitrarily-named conditions. The function below will be called when ANY of them match.
  isDesktop: `(min-width: ${breakPoint}px)`,
  isMobile: `(max-width: ${breakPoint - 1}px)`,
}, () => {

  // context.conditions has a boolean property for each condition defined above indicating if it's matched or not.
  let { isDesktop, isMobile } = context.conditions;

  gsap.to(".box", {
    rotation: isDesktop ? 360 : 180, // spin further if desktop
  });}
}); 

 

Unfortunately we don't have the time resources to comb through your entire code and find if this approach is feasible in your case, you'll have to do that, but you can check your GSAP and ScrollTrigger instances and see if the differences are just some values, then you could use this approach as well.

 

Hopefully this helps.

Happy Tweening!