Search the Community

Hello guys, Just started my first gsap project using react js. There is a loader which is visible at the initial load and I pass a flag prop to the main component once the loader disappears. Once this flag is received by the main component, I play the timeline using the play method. In the timeline I'm fading in multiple elements present in the section. I'm facing a problem where this timeline is a part of the ScrollTrigger animation which happens on every section scroll. So for the first screen, as soon as the loader disappears the animation is already complete as the ScrollTrigger considers it in the viewport. //Main component this.timeline = gsap.timeline().pause(); //sections, sectionRight, descriptions are refs of sections and elements which fade in. sections.forEach((section, index) => { const tl = gsap.timeline({ paused: true }); tl.to(sectionRight, { autoAlpha: 1, duration: 0.5 }).to(descriptions, { autoAlpha: 1, duration: 0.5, y: 0 }, 1); ScrollTrigger.create({ trigger: section, animation: tl, start: "top +=70", end: "bottom top", scrub: 0.5 }); }); //this.timeline is same as above tl which is played when the loader flag is received. But the animation is already played due to being in the viewport. Also, I want the timeline (tl) to play on each section scroll when in viewport but doesn't work properly. Not able to figure out where is it going wrong. Help very much appreciated. Thanks in advance.

Hi Everyone! Trying to figure out how I go about hiding layers in my svg using scrolltrigger. The effect I'm trying to go for is when a user scrolls down on page a new layer is displayed at certain points/triggers (while also keeping original or first layer displayed always). However as you can see from my pen example there are certain layers I'd to hide when scroll gets to a certain trigger, right now they overlap which I kind of expected. I've been reading up on stagger but I'm not sure how I would go about implementing with scrolltrigger. Thanks in advance!

Hello, I've using in past ScrollMagic with combinations before I discover ScrollTrigger, main reason was that I could make it work on mobile and table (iOS tested only) and since I moved from ScrollMagic to the awesome ScrollTrigger from gsap, I moved just two timelines both works on mobile (iPhone) but still without any changes on iPad. Is there any special thing I have to do to make it work on iPad? I'm using Webpack with GSAP 3.4.0. I don't see anything special why it shouldn't work. What could cause the problem? import {gsap, TweenMax, TimelineMax} from 'gsap'; import 'imports-loader?define=>false!scrollmagic/scrollmagic/uncompressed/plugins/debug.addIndicators'; import {TextPlugin} from 'gsap/TextPlugin'; import {CSSRulePlugin} from 'gsap/CSSRulePlugin'; import { ScrollTrigger } from "gsap/ScrollTrigger"; gsap.registerPlugin(TextPlugin, CSSRulePlugin, ScrollTrigger); $(function() { if (document.querySelector('.IntroAnimation')) { let introTl = gsap.timeline({ scrollTrigger: { trigger: '.IntroAnimation', start: "40px center", end: "bottom center", scrub: true, toggleActions: "restart pause reverse pause", markers: true } }); introTl.to('.IntroPlatform-base', {opacity: 0, scale: 0.8}); introTl.to('.IntroPlatform', {rotateX: 0, className: 'IntroPlatform hasShadowRow'}); introTl.to('.IntroPlatform-slide.isHidden', { display: 'block', opacity: 1, onReverseComplete: hideSlides, onComplete: allowSwipeIntro, }, '<'); introTl.to('.IntroPlatform.hasShadowRow', {opacity: 1}, '-=1'); introTl.to('.IntroPreview-play', {opacity: 1}); function hideSlides() { introSlider.slideTo(2); introSlider.allowSlideNext = false; introSlider.allowSlidePrev = false; } function allowSwipeIntro() { introSlider.allowSlideNext = true; introSlider.allowSlidePrev = true; } } });

I'm trying to trigger different timelines at different breakpoints using the window.matchmedia(); method. I've attempted to put together a potential example here: const box = document.querySelector(".box"); const change = document.querySelector(".change"); const mqs = [ window.matchMedia("(min-width: 600px)"), window.matchMedia("(min-width: 768px)"), window.matchMedia("(min-width: 1024px)") ]; const tl = gsap.timeline({ paused: true; }); if (mqs[0].matches) { tl.to(box, { backgroundColor: "green" }); } else if (mqs[1].matches) { tl.to(box, { backgroundColor: "pink" }); } else { tl.to(box, { backgroundColor: "black" }); } function playTl() { tl.play(); } change.addEventListener("click", playTl); My idea is to have the change button trigger the animations. Is it a little more complex that this approach? Having dug around in the forums it seems media queries plus gsap tends to throw up a number of complex solutions, I was hoping for something a little more simpler. Here's a Codepen also:

Hello, First of all, sorry for just copying and pasting the whole project, but I didn't have enough time to replicate the issue in a minimalistic way. Hope it's useful to solve the problem I'm facing. I'm currently working on my personal site which its homepage consists of a slider. When the slide changes, a div covering the whole viewport with a background image should also change accordingly. It is done using gsap.timeline() and as you can notice, there's a really noticeable amount of lag when the animation happens. Without the background change, everything is smooth. Tested on a 2018 15inch Macbook Pro running macOS Catalina 10.15.6 on Google Chrome v84.0.4147.89 (laggy), Firefox v79.0 (really really laggy) and Safari v13.1.2 (somehow smooth). Thank you in advance, Arnau. ps: I was just testing and I know the background image is incredibly stretched, already tried with a properly sized one and same results. ps2: As of now, only the next page button works ("següent").

Hey everyone, I've not had to give too much thought in the past to how I structure timelines, but I think it's going to be important on an upcoming project so would like some advice on how to tackle it. The animation is broken in to three steps, it should play but loop at the end of each step (almost in a passive state) until the user chooses to proceed to the next step. The user can also choose to play one of the three steps of the animation via navigation / buttons. All elements of the animation exist within a single provided SVG. Each scene will need to do different things to those same elements. So for example in step one I'll fade a key element in, in step two that same element might move off to the side. What would be the best way to tackle this? I've had two thoughts on how to approach it. Single Timeline Create a single (huge) timeline. Then add timeline labels at strategic points which should allow me to control which portion of the animation to play. Then figure out how to loop the last portion of each section until there is a user interaction such as clicking a 'next' button, or allowing them to choose a different step like above. Multiple Timelines Create a single global timeline. Then add separate timelines for each 'scene'. This should allow me the same control as above but keep the file cleaner as I can break the animation in to smaller chunks. Which of these is the better pattern to take, or is it worth doing it completely differently? Does anyone have examples of something similar? I've been looking around and found some examples but nothing seems to be quite like the above. Any help would be appreciated! Thanks Sam

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 am really loving Green Sock! I have an animation working, but I am wondering if there is a way to animate all elements at the same time in the same timeline, if that makes sense? See my codepen (you may want to view on codepen or resize the codepen window to see it clearly). My goal with this is to have each box fade in and transform/translate/scale all towards the center of the section and then to fade out at the same time. But, I am trying to get them to do this all at once and to come from different directions. I tried chaining .from().from()'s, but this just plays one and then starts another. I tried something like: tl .from(".icons-animated #HumanStars", {translateX: -200, translateY: -200, scale: 0.3, rotation: 90, autoAlpha: 0, ease: "power2"}, ".icons-animated #HumanStars strong", {translateX: -200, translateY: -200, scale: 0.3, rotation: 90, autoAlpha: 0, ease: "power2"}); but this doesn't seem to achieve my goal. Is there a way to animate .from() and chain the animations inside that from? Which methods should I be reading about/what is the syntax for this if it exists? Or am I not approaching this the right way? Thank you so much.

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.

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 } });

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

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

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!