maipo89 Posted September 27, 2022 Share Posted September 27, 2022 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 More sharing options...
Rodrigo Posted September 27, 2022 Share Posted September 27, 2022 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! 4 Link to comment Share on other sites More sharing options...
maipo89 Posted September 28, 2022 Author Share Posted September 28, 2022 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 More sharing options...
Rodrigo Posted September 28, 2022 Share Posted September 28, 2022 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! 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now