Search the Community

Hi Everyone Trying to do some simple animations of a DNA SVG graphic using scrolltrigger and morph svg. As you can see in codepen example I got it to work somewhat but the morph looks a little weird when I scroll down to second section (haven't yet added in other parts of graphic). Wondering if this is the right approach or if there is a better way to do this. Ideally when a user scrolls down small pieces of the graphic will appear (or ease in when scrolling).

Hi! I try to change animation with (window.matchMedia()).matches How can i get tween from timeline and replace (or edit) it? I read about .remove() method, but how can i add on removed place other tween and how can i add label to tween. for example: tl .addLabel('start') .to('.box-1', {x:100}, "start") // <--- how to change this or how to .remove() this and place other tween on this place .to('.box-2', {x:100}, "start")

Had a trawl through the site and codepen but couldn't find an answer. I have timelines that require different scrolltrigger values according to media queries, is it correct to place paused timelines outside the ScrollTrigger.matchMedia() and the scrolltrigger/s inside the function? Or is it best practice to duplicate timelines in each media query? Or some other setup? Thanks

Hello! I have a question, below is an example of the scroll "roulette" I have two questions: 1. Is it possible to do infinite scrolling, for example, it stopped at 100 (------->), the next number is 50 (<-------), and it should continue to scroll right (------>) and stop at 50, not left (<-------) * -------> - this direction: D 2. Is it possible at each start to first do several iterations from start to finish (as when scrolling a wheel) and only after that stop at the desired number? At the moment, if we stand at 10 and select 11, the cursor will move slightly, but it is necessary that he first spins like crazy and only then stops This library is amazing! ? Thanks!

Hi everyone. I have a trouble with master timeline. I can't figure out why all animations in master timeline start when content loaded. I want two animations of the computer to switch each 5~7 seconds . It works fine after the delay finishes. There are Mater timeline on the bottom of codes and functions are top of it. Could you give me some advises to fix this problem? Thank you.

I'm trying to do my first ScrollTrigger animation where I have two sections inside a container; first one has three boxes and the next one has a few lines of text. The goal is to animate the lines of text as the user scrolls down only after all the boxes in the previous container have been animated. I have created an example below to demonstrate this. The boxes are being animated as needed, however the lines of text begins animating, while the boxes are still animating. Also, the elements and text containers overlap each other. I'd like the text container to not overlap and reveal the lines of text as they are visible on the viewport. Any idea what I could be doing wrong? Any help is much appreciated, Thank you!

Hi, I have this timeline playing a simulation of reflection on the water. I wanted to duplicate the timeline, all over the view box. The same SVG object, the same animation but on different locations and playing all at the same time. It is that possible ? I have a test on codepen. Thanks, Sergio

Hi guys. I am trying to achieve an overlay menu animation using this stack: React, styled-components and gsap. I made a simplified example of my code in here: https://codesandbox.io/s/young-wildflower-ld94q The main overlay animation plays smoothly, but the menu items dont. I am trying to create a stagger effect for each MenuItem component. As you can see using useRef() hook only works only for the last component. When Iterating an array of components useRef() is not the right choice since the same ref has been passed to multiple objects, but still I have no idea how to get a progressive fade for each component and I'm not even sure I'm using gsap in the correct way. What am I doing wrong? Thank you in advance, Matteo.

I want to create something like function with parrameters to generate template for timeline Example: let tl = gsap.timeline({paused: true, defaults: {duration: 0.2}}) /** opt format: opt = { prop: "", // x, y from: "", // value "+=10".. to: ""// value "0" } */ function tlgenerator(element, opt){ let tl = gsap.timeline(); tl.fromTo(element, {opt.prop: opt.from, autoAlpha: 0}, {opt.prop: opt.to, autoAlpha: 1}) return tl } tl.addLabel("start") .add(tlgenerator(element1, {prop: "y", from: "-=10", to: "0"}), "start") .add(tlgenerator(element2, {prop: "x", from: "+=10", to: "0"}), "start") .... It is not working example I'm not sure that this question need codepan demo?

Hi, do you have any tips how make a dragger/timeline or progress bar fulfill by itself as the mouse is being moved? Additionally, how to read its value in real time? I want to update mood.progress() value adequately. In short words - the goal is for pet's mood to get better as you move your mouse. Right now you can do it by dragging a dot on a slider. I'm using GSAP since yesterday. I've been fighting all day with it and cannot think of any proper solution. Thanks! [EDIT] Solved

Hi, I'm new to GSAP. I just wanted to check if I can use timeline and scrolltrigger on the same trigger element. I'm getting issues specially when I try to scroll back. Below is the code. gsap.timeline() .to(".background-scene", { opacity: 0, scrollTrigger: { trigger: ".page-7", pin: true, scrub: 0.5, markers: true } }) .fromTo(".background-scene-2", { opacity: 0 }, { opacity: 1, scrollTrigger: { trigger: ".page-7", pin: true, scrub: 0.5, markers: true } }) .to(".background-scene-2", { opacity: 0, scrollTrigger: { trigger: ".page-9", pin: true, scrub: 0.5, markers: true } }) .to(".background-scene-3", { opacity: 1, scrollTrigger: { trigger: ".page-9", pin: true, scrub: 0.5, markers: true } });

Hey there ? This is my first time using Timeline, so I'm sure I must be missing something obvious. What I'm trying to do is start the record off slow, let it spin baby spin, and then bring it to a gentle stop with some more easing tacked on the end. But ignorance has stopped me in my tracks, yet again. Any help getting this party started would be greatly appreciated. Cheers!

Is there a built in way to stop/pause a Timeline at a specific time? //Plays from 5 seconds timeline.play(5) //I'm looking for a way to play from 5 seconds and stop at 10. timeline.play(5, 10)

Hi everyone, I'm really newbie with gsap and I'm more than sure that I did some awful mistakes. Sorry in Advance if this was already asked / the answer is in documentation but I really couldn't find it and I managed to spend 8h trying to fix this ( deleting and remade-ing ) . So for short I found some really great examples and this one caught my eye: This one more precisely: https://codepen.io/osublake/pen/YrXdGZ -- I started to analyse it and I tried initially to migrate from gsap 2 to gsap 3 but unfortunately I managed to fail miserably. Afterwards I tried to recreate it from scratch to understand how it works where I failed but still ... I managed to get stuck. The main problem: I don't understand why in the demo this line: var animation = new TimelineMax({ repeat: -1, paused: true }) .add(baseTl.tweenFromTo(1, 2)) mainly starts the timeline in a great position and in my situation: _.animation = gsap.timeline({repeat: -1, paused: true}).add(_.timeline.tweenFromTo(1, 2)); it just stays in place. I also tried to reproduce Blake's example in localhost and it does the same thing ( after changing everything to gsap.timeline and gsap.to ). I'm thinking that I miss something or it's a bad thing on putting the timeline in 'this' object. In the end I just want to properly select the center object/objects and increase the scale . And I'm trying to implement a progressive scaling on each item like: 0.6-0.8-1-0.8-0.6

Hello GSAP community! How's everybody? I would like to know if you could help me. I have two timelines that are triggered by ScrollTrigger when I am within the range of the start attribute. The onEnter and onLeaveBack events of the same ScrollTrigger instance work with timeline.play () and timeline.reverse () respectively, the problem starts when the two timelines are fired and loses the smoothness of the transition. Example: When I move from div.p3 to div.p1 tl2 is interrupted, it is interrupted by tl1 and overwrites everything. I don't quite understand if it could be fixed with invalidate or overwrite. Thank you very much in advance! Here I attach my codepen: https://codepen.io/cpiocova/pen/PoZVEva <body> <div id="box"></div> <div class="p1 pages"></div> <div class="p2 pages"></div> <div class="p3 pages"></div> </body> const box = document.getElementById('box') const tl1 = gsap.timeline({paused: true}) const tl2 = gsap.timeline({paused: true}) tl1.to(box, { duration: 3, x: 350, y: 30, rotation: 45, ease: "expo.inOut" }) tl2.to(box, { duration: 3, x: 20, y: 20, rotation: -125, ease: "expo.inOut" }) ScrollTrigger.create({ trigger: ".p2", start: "0 top", markers: true, onEnter: () => tl1.play(), onLeaveBack: () => tl1.reverse() }) ScrollTrigger.create({ trigger: ".p3", start: "0 top", markers: true, onEnter: () => tl2.play(), onLeaveBack: () => tl2.reverse() }) PD: Excuse my bad English.

Hi, I'm new to gsap, but didn't found any post according to my problem. The point is, that if I prepare a timeline itself and it's played outside scrolling trigger, all delays, segments are running well. But when I put a default scrollTrigger to the timeline attached to section#how-we-work it plays all of the animations at once without any delay. Looks like scrollTrigger ignoring all of delays set. Here below some code I use, thank you for any hint how to solve this: gsap.registerPlugin(ScrollTrigger); //gsap.registerPlugin(); ScrollTrigger.defaults({ toggleActions: 'play pause reverse none', markers: true, }); $( document ).ready(function() { var tl = gsap.timeline(); tl.from('#top-menu',{ y: -100, duration:1, ease: "back" }); var panel_how = gsap.timeline({ defaults:{ delay:2, duration: 1, opacity: 0, scrollTrigger:{ trigger: '#how-we-work', scrub: 1, pin: true, start: 'top 10%', end: 'bottom 50%', id: 'panel-how', } } }); panel_how .from('#cms404_module_31 .cms404_module_header',{x: 100, ease: 'back(2)'}) .from('#cms404_module_31 ._CMS4Toolbox p',{x: -100, ease: 'back(2)', }) .from('#cms404_module_31 ._CMS4Toolbox .btn',{y: 20, ease: 'back(2)', duation: 1}) .from('#lg-dots-1 ',{ scale: 0, duration:1, transformOrigin: '50% 50%' }) .from('#lg-dots-2 ',{ scale: 0, duration:2, transformOrigin: '50% 50%', delay: 0.5 }) .from('#lg-dots-3 ',{ scale: 0, duration:3, transformOrigin: '50% 50%' },'+=1') .from('#COG',{ y: "-5", scale: 0.5, transformOrigin: '50% 50%' },'+=1') .from('#CLOUD',{ y: "-5" }) .from('#EQ',{ y: "-5" }) .from('#LINE',{}); });

Sorry for the noob question here, but I can't seem find it anywhere, so here goes. My nuxt.js index page has several 'panel' components. Each one is full page, and are animated like on this codepen. https://codepen.io/urbgimtam/pen/XWXdypQ Because I'm working with Nuxt, on the main page (responsible for animating the 'panels') I'm using something like: <template> <div> <panel :content="content_a" /> <panel :content="content_b" /> <panel :content="content_c" /> </div> </template> <script> import { gsap, ScrollTrigger } from 'gsap/all' import panel from '[path/to/component]' export default { components: { panel }, data() { return { tl = gsap.timeline() } }, mounted() { gsap.registerPlugin(ScrollTrigger) [... animations defined here ] }, methods: { playAnim() { this.tl.play(0) } } } </script> However, inside each <panel>, I also want to have independent animations. If inside a <panel> component I have again <script> import {gsap, ScrollTrigger} from 'gsap/all export default { data() { panelTimeline: gsap.timeline() }, mounted() { gsap.registerPlugin(ScrollTrigger) [... animations defined here] }, methods: { playAnim() { this.panelTimeline.play(0) } } } </script> is the panelTimeline refering to the same timeline as the parent? I seem to have some interference somewhere in my project and I'm wondering if the parent component ends up sharing the same timeline as the children. I'm using ScrollTrigger on the index (which is the parent of all the panel components), and I've read on the Docs that it uses one single timeline. If so, what should be the best way to make sure to have independent timelines? Big thank you in advance. PS: On gsap v.2, we would do tl: new Timeline() and that would work (and there was no ScrollTrigger )

//This is a onclick function which gets triggered on a button click which is responsible to animated each node to some coordinates defined startAnimation: function(){ // condider findThechildrens function pushes 21 childrens in the global array (function defined below) //please if anyone has any idea to make this code modular and not repetative please help findTheChildrens(); var tween1 = new gsap.timeline(); var tween2 = new gsap.timeline(); var tween3 = new gsap.timeline(); var tween4 = new gsap.timeline(); var tween2 = new gsap.timeline(); var tween3 = new gsap.timeline(); var tween4 = new gsap.timeline(); var tween5 = new gsap.timeline(); var tween6 = new gsap.timeline(); var tween7 = new gsap.timeline(); var tween8 = new gsap.timeline(); var tween9 = new gsap.timeline(); var tween10 = new gsap.timeline(); var tween11 = new gsap.timeline(); var tween12 = new gsap.timeline(); var tween13 = new gsap.timeline(); var tween14 = new gsap.timeline(); var tween15 = new gsap.timeline(); var tween16 = new gsap.timeline(); var tween17 = new gsap.timeline(); var tween18 = new gsap.timeline(); var tween19 = new gsap.timeline(); tween17.to(this.tweenArr[1].position, { duration: 10, x: 10, ease:Linear.None }); tween18.to(this.tweenArr[2].position, { duration: 10, x: -10, ease:Linear.None }); tween14.to(this.tweenArr[3].position, { duration: 10, x: 20, ease:Linear.None }); tween5.to(this.tweenArr[4].position, { duration: 10, z: 15, ease:Linear.None }); tween6.to(this.tweenArr[5].position, { duration: 10, z: 15, ease:Linear.None}); tween7.to(this.tweenArr[6].position, { duration: 10, z: 15, ease:Linear.None}); tween8.to(this.tweenArr[7].position, { duration: 10, z: 15, ease:Linear.None }); tween9.to(this.tweenArr[8].position, { duration: 10, x: 25, ease:Linear.None}); tween10.to(this.tweenArr[9].position, { duration: 10, x: 25, ease:Linear.None }); tween1.to(this.tweenArr[10].position, { duration: 10, x: -20, ease:Linear.None }); tween2.to(this.tweenArr[11].position, { duration: 10, x: -20, ease:Linear.None}); tween3.to(this.tweenArr[12].position, { duration: 10, x: -20, ease:Linear.None}); tween4.to(this.tweenArr[13].position, { duration: 10, x: -20, ease:Linear.None }); tween11.to(this.tweenArr[14].position,{ duration: 10, y: -20, ease:Linear.None}); tween12.to(this.tweenArr[15].position,{ duration: 10, y: -20, ease:Linear.None }); tween19.to(this.tweenArr[16].position,{ duration: 10, x: 15, ease:Linear.None }); tween13.to(this.tweenArr[17].position,{ duration: 10, x: -15, ease:Linear.None }); tween16.to(this.tweenArr[19].position,{ duration: 10, z: 5, ease:Linear.None }); tween15.to(this.tweenArr[20].position,{ duration: 10, z: 10, ease:Linear.None }); }, //This functions gets called only one time which is responsible to tranverse the assembly and keep all found childrens into a global array (tweenArr) findTheChildrens : function(){ this.findTheChildrens = function(){}; var node = scene.children[2].children[0]; for (var i = 0; i < node.children.length; i++) { var childNode = node.children[i]; if (childNode.children.length > 0) { if (childNode.children[0].type == "Group" || childNode.children[0].type == "Mesh") { this.tweenArr.push(childNode); } } } },

hello there beautiful people! first of all, this marvelous timeline is working as intended, the problem: "it's going to get huge" as i add more elements and i dont want to polute my Home.vue view with a long long non readable timeline... I WANT to move this code to a separated file. how do i do that? i know i have to create a separate file and put it somewhere like ../tweens/home.js and then import it on my view import { twnHome } from '../tweens/home' i did try this but it did not work.. im pretty sure i was close.. if this is kind of right... how do i access the TL controls (play, reverse..) ? THANKS A LOT for your time. i hope this makes sense!

I feel like I may be overthinking this... ? I have multiple sections on a page, each with their own timeline, all of which are attached to the scrollbar via ScrollTrigger. The trigger for each section is the ID of the section's container, and the timelines start at the top of each container. I'm trying to set up a fixed navigation with anchor links for the user to navigate between these sections. The problem I'm running into is that when you click on a nav link, it scrolls the user to top of the container, which is the start of the timeline. Since the timeline is attached to the scroll bar, the user will then have to scroll to play out the rest of the timeline (which I feel is not always intuitive enough). Is there a way to link to the end of the timeline of a section? I tried putting a hidden element at the end of each section for the anchor link to link to... but that doesn't always play out the whole animation. I also thought about making separate timelines (but I feel like that's too much work for something that probably has an easier solution). Am I missing something?

Hey! Suuuuper new to GSAP. ? I'm setting up a timeline, and I have ScrollTrigger attached to the scrollbar. There are certain elements on the timeline that I want to slow down their animation 'cause they fly onto the page at the slightest touch of the scroll bar. What property or properties do I need to add or adjust to do this? Here's my code: ** And to add, I've tried changing the duration, delay, and scrub; none of those seem to have had an effect on the time it takes to scroll through an animation. let hcSection = gsap.timeline({ scrollTrigger: { trigger: "#healthcareHome", pin: true, start: "top top", end: "+=1000", scrub: 2, } }); hcSection.from('#healthcareHome .circle svg', { duration: 2, delay: 0.5, x: '+=200px', y: '100%', scale: 0, autoAlpha: 0, rotation:'360', ease: "power4", }).from(".healthcare-home-text", { duration: 2, delay: 0.5, y: '90%', autoAlpha: 0, ease: 'power4', }).from("#healthcareHome .web-browser",{ duration: 2, delay: 0.5, y: '90%', autoAlpha: 0, ease: 'power4', }).from("#hcBrowserSVG path, #hcBrowserSVG circle, #hcBrowserSVG g, #hcBrowserSVG text", { duration: 2, scale: 1.5, ease: "linear", force3D: true, opacity: 0, delay: 0.2, stagger: 0.2, transformOrigin:'50% 50%', }).to('#healthcareHome .row', { duration: 2, scale: 1.5, ease: "linear", force3D: true, opacity: 0, delay: 0.5, stagger: 0.2, transformOrigin:'50% 50%', });

Hello everyone, I'm doing an animation with a big overlay on page so I'm using the timeline of TimelineMax but I have issue when I'm using .className. To be brief, when I'm using className, it remove all classes on my element and I don't understand why it overwrite it all. Should I write it differently to keep existing classes ? Or is it possible to add an overwriting setting for .className ? This is a codePen that I simplify to troubleshoot : https://codepen.io/FrenchCooder/pen/ZEQpWJe Thanks in advance

I'm trying to use gsap in combination with ScrollMagic. To do so I created a timeline, but this returns an error for setTween(tween): Anyways, after importing: import "scrollmagic/scrollmagic/uncompressed/plugins/animation.gsap"; I get the following error: import {gsap} from "gsap"; import ScrollMagic from "scrollmagic"; export const initPhoneScroll = () => { const tween = gsap.timeline() .to(".phone-left", 1, { x: -350 }) .to(".phone-right", 1, { x: 350 }); const controller = new ScrollMagic.Controller(); const scene = new ScrollMagic.Scene({ triggerElement: ".phone-image__wrapper", duration: "100%" }) .setTween(tween) .addTo(controller); }; How do I use gsap in combination with ScrollMagic correctly, since TweenMax, TweenLite, TimelineLite, and TimelineMax have all been consolidated?

I'm kind of stuck on how to approach this problem. I have a timeline that is showing a primary SVG image, I'm trying to find a way to swap the SVG for another as a part of the timeline, and then continue the animation.

I was hoping somebody might be able to help with a little GSAP issue I'm having ? Essentially, on our site we have a 'Menu and Search' button, that when clicked, will animate in the various parts of the full-screen, takeover menu. As well as this, we also have a separate function which deals with toggling a few classes, etc. This function has been assigned to the onStart callback, and also the onReverseCompleted callback, however it appears that on rare occasions (and I can't seem to create a consistent test case for this) that the onStart is running twice, and therefore breaks our animation. Does anybody have any ideas as to why this may be? I've mocked up a sample CodePen with a general gist of our code, except in a more simple context. Any help would be much appreciated. Thanks!