Jump to content
Search Community

Gsap multiple animations on scroll

maipo89 test
Moderator Tag

Recommended Posts

Hello everyone,

I'm new to Gsap. I was trying to do this scrolltrigger animation where on scroll, the red box should scale and fit the yellow container, and at the same time text 1 and text 2 move at the center of the square. Any idea how to acheive this? I added a codepen with what I've done, but it seems not working.

Thank you everyone.

See the Pen poVabgm by maipo89 (@maipo89) on CodePen

Link to comment
Share on other sites

Hi @maipo89 and welcome to the GreenSock forums!

 

Thanks for the simple demo, made it super easy!

 

You have to use the Position Parameter in a timeline in order to alter the default order of execution. Normally, as you've already seen, tweens inside a timeline run in a regular sequential order. But you can play with that based on your project's requirements using the position parameter and labels as you can see in the documentation:

https://greensock.com/docs/v3/GSAP/Timeline

 

But for this particular case all you need is to add a less than sign on each text tween in order to make this work.

const tl = gsap
  .timeline({
    scrollTrigger: {
      trigger: ".quote",
      scrub: true,
      pin: true,
      markers: true,
      start: "50% 50%",
      end: "+=200%"
    }
  })
  .from(".image", {
    scale: 0.5,
    ease: "none"
  })
  .from(".title", {
    top: "150px",
    ease: "none"
  }, "<")
  .from(".subtitle", {
    top: "450px",
    ease: "none"
  }, "<");

That basically tells GSAP  to start that tween when the last one starts, so that means both start at the same time. In the case of the second text (subtitle) is the same thing, start when the first text starts and,  since the first text starts with the image tween, they all start at the same time. You can also use absolute positioning by replacing "<" with a 0:

const tl = gsap
  .timeline({
    scrollTrigger: {
      trigger: ".quote",
      scrub: true,
      pin: true,
      markers: true,
      start: "50% 50%",
      end: "+=200%"
    }
  })
  .from(".image", {
    scale: 0.5,
    ease: "none"
  })
  .from(".title", {
    top: "150px",
    ease: "none"
  }, 0)
  .from(".subtitle", {
    top: "450px",
    ease: "none"
  }, 0);

Since your timeline is rather simple and has just those three instances that should start at the same time, using zero as position works as well.

 

Here is a live example:

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

 

Happy Tweening!

  • Like 4
Link to comment
Share on other sites

Thank you Rodrigo,

 

Your explanation was really simple, I had maybe just to read more into the documentation to find the solution.

I'm trying to add now the matchMedia to make the animation play only up to 900px, I've tried this code as explained in the documentation, but gave me this error "gsap__WEBPACK_IMPORTED_MODULE_0__.default.matchMedia is not a function".

 

Here is my code, I'm using VueJS 

import gsap from "gsap";
import { TimelineLite } from 'gsap';
import ScrollTrigger from "gsap/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);

mounted() {
  
  let mm = gsap.matchMedia();
  mm.add("(min-width: 900px)", () => {

    //my previes code//

  })
  
}

 

Link to comment
Share on other sites

What particular version of GSAP you have?

 

Also there is no need to import TimelineLite, that syntax is deprecated, all you need is the global gsap object in order to create a timeline:

import gsap from "gsap";

const tl = gsap.timeline();

Try updating GSAP to the latest version by running:

npm i --save gsap

That should update the package to version 3.11.2

 

If you keep having issues please provide a reduced minimal sample in codesandbox or stackblitz in order to check and see what could be the issue.

 

Happy Tweening!

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...