Search the Community

I have this animation, where I am having a hard time making a particular animation complete in almost 20% or start of a particular label. const zoomData = [ {scale: 1, origin: [0.5, 0.5] }, {scale: 18, origin: [0.685, 0.38], steps: [ { type : 'in', el : '.location_1', }, { type : 'out', el : '#text', }, { type : 'out', el : '.location_wrapper .section-title', }, { type : 'out', el : '.location_wrapper .andaman-key', }, { type : 'in', el : '#htxt', }, ], label : 'empty' }, {scale: 1, origin: [0.5, 0.5], steps: [ { type : 'out', el : '.location_1', }, { type : 'out', el : '#htxt', }, ], label : 'havelock' }, {scale: 18, origin: [0.500, 0.78], steps: [ { type : 'in', el : '.location_2', }, { type : 'in', el : 'svg #ctxt', }, ], label : 'chidiyatapu' }, ]; I have this object which is responsible for setting up the animation. It is used by the following Js to add it to the timeline. zoomData.slice(1).forEach(data => { if(data.steps) { tl.zoom(".location_island", { scale: data.scale, origin: data.origin, ease: "power1.inOut" }); tl.addLabel( data.label , "<"); data.steps.forEach( step => { if(step.type == 'out') { tl.fromTo(step.el, { autoAlpha: 1, display: 'block', }, { autoAlpha: 0, display: 'none', ease: "power1.inOut" }, data.label ) } if(step.type == 'in') { tl.fromTo(step.el, { autoAlpha: 0, display: 'none', }, { autoAlpha: 1, display: 'block', ease: "power1.inOut" }, data.label + "+=20%" ) } }) } else { tl.zoom(".location_island", { scale: data.scale, origin: data.origin, ease: "power1.inOut" }) } }); }); How can I make the text, Our Centers, Andaman Island and `#text` fade away when I am first time zooming inside.

Sorry for not (yet) having a minimal demo, I hope that someone can point me in the right direction without, but I'm willing to build one if needs be. Also as the my problem ist related to iOS (and iPad OS) I might have to make a video if my explanation doesn't suffice. The situation: I have 6 Sections that fill the Body (minus fixed footer and header) the first is an group picture with transparent divs overlayed that scrollto (gsap.plugin) the related section of the person. Each section has a Timeline with a scrollTrigger with a label dead center. All of that works without a hitch on all desktop-browsers I tested it on. (Including Safari on the Mac.) I also have a onSnapComplete callback that fires an independent animation with a minimal delay. Also working as expected. On the i-devices however the sections tremble for quite a while regardless from of method i reach them. (Normal scrollling or scrollTo.) I have a delay and a duration for snapping, but playing with those didn't help. I tried force3D with false and true to no avail worked autoKill: false into the scrollTo - no dice... (I testet on an iPad Pro 12,9 " 4th gen and a iPhone 12proMax, so hardware speed isn't the likely reason) Here is the temporary linke to the page https://bit.ly/3jSenqy so you can see and compare if you would want to. I do hope that the issue is something that came up before and you can point me in the right direction. Thanks!

Hello All, I created a Vertically Pinned section with GSAP and scrollTrigger the section link is attached. Basically this is working fine for me but there is a problem. I wants that when I click on a specific anchor then it will scrolled to the specific section I tried different methods but it is not working fine. It will be great if you help me in this case. I'll be thankful.

Hi. I want to pin a section and change child sections using fadeIn-fadeOut. I tried to use the onToggle method to get the data attribute or just index for the current section, but in this case "onToggle" doesn't work. Same with "toggleClass". Do you know why this is happening? I know I don't need data attributes, index is enough, but I've tried to do it in different ways.

Hi! Thank you so much for this incredibly valuable forum. I've learned a lot lurking already. I am having trouble animating an alternating entrance point based on class name. In my example all 3 images "reveal" from left to right, but I'd like them to alternate so the images ON the right reveal from the right. Each block has a class of either "reveal-image-left" or "reveal-image-right" that could be leveraged instead if the "reveal-image" selector that's being used across all 3 images now. (The HTML is identical for each block with the alternating positioning done with Flexbox) I cannot for the life of me figure this out and I'm not fluent enough in GSAP/Js to get this over the finish line. Many thanks for your help!

Hi! Here is a problem. This block moves down because text has 30% width and it has two lines. But script loads faster than text goes on the second line and the block moves down. I can't use <br/> because on mobile it will be other. How to fix it?

Hi there! On mobile safari autoscrolling to the sections is lagging. Can you help me to fix it?

Hello, First of all, i'm totally new to GSAP and really in love of it! Congrats team for this work. I work on an Angular v10. I would like to know if this following code follow the good practices for GSAP or if i can optimizes it better. Sometimes when i refresh my page, all animations are playing on the scrolltrigger simultaneously like they have lost their real positons. (i can add a video to show the issue) drawLine() { gsap.defaults({ease: 'none'}); gsap.set('.ball', {xPercent: -50, yPercent: -50}) var tl = gsap.timeline({ defaults: { duration: 0.5, autoAlpha: 1, scale: 2, transformOrigin: 'center', ease: 'elastic(2.5, 1)' } }) //Tl 1 var action = gsap.timeline({ defaults: {duration: 1}, scrollTrigger: { trigger: '#c-header', endTrigger: "#c-description", scrub: true, start: 'top top', end: '+=400px', onEnter: () => this.setActivePath('dot1'), onEnterBack: () => this.setActivePath('dot1') } }) .to('.ball01', {duration: 0.01, autoAlpha: 1}) .from('.theLine', {drawSVG: '0'}, 0) .to('.ball01', {motionPath: {path: '.theLine', alignOrigin: [0.5, 0.5]}}, 0) .add(tl, 1); //Tl 2 var action = gsap.timeline({ defaults: {duration: 1}, scrollTrigger: { trigger: '#c-description', endTrigger: "#c-helping", scrub: true, start: 'top 25%', end: '+=420px', toggleClass: {targets: ".c-dot-nav", className: "reverse"}, onEnter: () => this.setActivePath('dot2'), onEnterBack: () => this.setActivePath('dot2') } }) .to('.ball02', {duration: 0.01, autoAlpha: 1}) .from('.theLine2', {drawSVG: '0'}, 0) .to('.ball02', {motionPath: {path: '.theLine2', alignOrigin: [0.5, 0.5]}}, 0) .add(tl, 1); //Tl 3 var action = gsap.timeline({ defaults: {duration: 1}, scrollTrigger: { trigger: '#c-helping', endTrigger: "#c-starting-1", scrub: true, start: 'top 25%', end: '+=720px', toggleClass: {targets: ".c-dot-nav", className: "reverse-w"}, onEnter: () => this.setActivePath('dot3'), onEnterBack: () => this.setActivePath('dot3') } }) .to('.ball03', {duration: 0.01, autoAlpha: 1}) .from('.theLine3', {drawSVG: '0'}, 0) .to('.ball03', {motionPath: {path: '.theLine3', alignOrigin: [0.5, 0.5]}}, 0) .add(tl, 1); //Tl 4 var action = gsap.timeline({ defaults: {duration: 1}, scrollTrigger: { trigger: '#c-starting-1', endTrigger: "#c-starting-2", scrub: true, start: 'top 40%', end: '+=260px', onEnter: () => this.setActivePath('dot4'), onEnterBack: () => this.setActivePath('dot4') } }) .to('.ball04', {duration: 0.01, autoAlpha: 1}) .from('.theLine4', {drawSVG: '0'}, 0) .to('.ball04', {motionPath: {path: '.theLine4', alignOrigin: [0.5, 0.5]}}, 0) .add(tl, 1); //Tl 5 var action = gsap.timeline({ defaults: {duration: 1}, scrollTrigger: { trigger: '#c-starting-2', endTrigger: "#c-flip", scrub: true, start: 'top 40%', end: '+=476px' } }) .to('.ball05', {duration: 0.01, autoAlpha: 1}) .from('.theLine5', {drawSVG: '0'}, 0) .to('.ball05', {motionPath: {path: '.theLine5', alignOrigin: [0.5, 0.5]}}, 0) .add(tl, 1); //Tl 6 var action = gsap.timeline({ defaults: {duration: 1}, scrollTrigger: { trigger: '#c-flip', endTrigger: "#c-tips", scrub: true, start: 'top 40%', end: '+=385px', onEnter: () => this.setActivePath('dot5'), onEnterBack: () => this.setActivePath('dot5') } }) .to('.ball06', {duration: 0.01, autoAlpha: 1}) .from('.theline6', {drawSVG: '0'}, 0) .to('.ball06', {motionPath: {path: '.theline6', alignOrigin: [0.5, 0.5]}}, 0) .add(tl, 1); //Tl 7 var action = gsap.timeline({ defaults: {duration: 1}, scrollTrigger: { trigger: '#c-tips', endTrigger: "#c-form", scrub: true, start: 'top 40%', end: '+=832px', onEnter: () => this.setActivePath('dot6'), onEnterBack: () => this.setActivePath('dot6') } }) .to('.ball07', {duration: 0.01, autoAlpha: 1}) .from('.theline7', {drawSVG: '0'}, 0) .to('.ball07', {motionPath: {path: '.theline7', alignOrigin: [0.5, 0.5]}}, 0) .add(tl, 1); //Tl 8 var action = gsap.timeline({ defaults: {duration: 1}, scrollTrigger: { trigger: '#c-form', endTrigger: "#c-talk-soon", scrub: true, start: 'top 40%', end: '+=690px', toggleClass: {targets: ".c-dot-nav", className: "reverse"}, onEnter: () => this.setActivePath('dot7'), onEnterBack: () => this.setActivePath('dot7') } }) .to('.ball08', {duration: 0.01, autoAlpha: 1}) .from('.theline8', {drawSVG: '0'}, 0) .to('.ball08', {motionPath: {path: '.theline8', alignOrigin: [0.5, 0.5]}}, 0) .add(tl, 1); //Tl 9 var action = gsap.timeline({ defaults: {duration: 1}, scrollTrigger: { trigger: '#c-talk-soon', endTrigger: "#c-footer-1", scrub: true, start: 'top 40%', end: '+=500px', toggleClass: {targets: ".c-dot-nav", className: "reverse-w"}, onEnter: () => {this.setActivePath('dot8'); this.nurse2.play();}, onEnterBack: () => this.setActivePath('dot8') } }) .to('.ball09', {duration: 0.01, autoAlpha: 1}) .from('.theline9', {drawSVG: '0'}, 0) .to('.ball09', {motionPath: {path: '.theline9', alignOrigin: [0.5, 0.5]}}, 0) .add(tl, 1); }

After calling scrolltrigger refresh function in the middle of my page (to update starts and ends when accordions are opened) every single animation that happened before my location on the page broke If I go back to the beginning of the page before calling the scrolltriger refresh everything works prefectly, but not if I am in the middle of the page Unfortunately I can't share any code since it got a lot to it, and I simply can't create a simpler version. Maybe someone had a similar problem before I have tried using refreshPriority, did not work I have 6 accordions in total, and after I open them i want to update all of the starts and ends after.

Hello everyone, I have a serious problem that I can't solve. I need to add buttons to my animation to go back to markers in time. But as my animation is scrolltriggered with scrub:true , when I play the timeline to the labeled time, I get an offset between the animation and the scroll position. Is it possible to solve it? Thank you very much

Hi there, I was wondering if it is possible to add GSAP animations between these other animations that have ScrollTrigger. I mean the run some animations inside the first section, finish this animations and then animate the overlap transition to the next section. The same with all the following sections. I'm kind of new in these animations and couldn't find more examples to try. I was trying with disable method on ScrollTrigger but nothing so far. Thanks in advance.

Hi, I am currently working in a proyect using React, Tailwind css and Scroll Trigger, and I have a problem working to gsap triggers, the problems is that animation starts before the trigger. the structure is as follow: 4 sections, any section is pining for 100% height, and in the third section need to animate 4 containers but, the animation start to happend if i put the selector in the last section. This is the sandbox of example: CodeSandBox

Hi! I made a timeline attached to a scrolltrigger. When the SVG div appears on the screen, the title is animated, then the subtitle, the icon and each element of the formula, the problem is that the word How Genius barely "appears", the rest of the elements are animated for more than the user has not scrolled to see them, and I would need each element to follow its animation as it scrolls, how can I do? I don't want to use scrub

I am having trouble getting my ScrollTrigger animations to fire dynamic animations (those of which are housed in premade functions) that a user selects from a wysisyg on a tabbed template. My setup is using react in conjunction with the GSAP library and things are componentized so we don't really always know what's on the page so we need the component to be able to restart itself. The issue comes when I am trying to trigger the animation upon tab click. OnRefresh it would be great to key off the tab click to be able to restart the ScrollTrigger animation and have it actually only fire upon scrolling to the trigger start point. As it is now, it either restarts the animation upon tab click without waiting for me to scroll to the trigger as it should or like my codepen demo, it fires only once and none of the other elements (brightly colored boxes) animate after clicking the tab and scrolling to the trigger starting point.

Hello! I had a new problem. I use GSAP and ScrollTriger. On mobile devices when I click on Input, the keyboard appears, because of this restart the animation. Animation is also restarted after the keyboard disappears. Is it possible to overcome? I really hope for your help.

Hey, I have a question with an animation I'm doing. I have like text message bubbles and when you scroll they need to appear but when the bubbles are near the end they start overlapping each other. How can I make them keep the same space during the timeline?

Hello! Please help me. I have a sample code on Codepen https://codepen.io/victor_trunov_/pen/vYgKmwM I have the following problem: 1) I clean the Google Chrome browser cache on Android. 2) I open the page and move to the end of the page. 3) All the effects that I applied through GSAP are updated in the visible area. The effect of blinking is created. Please help solve it. P.S. If I just refreshed this page without cleaning the cache, then there will be no problems.

Hi all, So i'm new to GSAP in general and came to it for ScrollTrigger. I've been working on my site as shown above but have run into a few questions: (a) This is more general. Lets says something is pinned, i'm having no problem animating that pinned item but as soon as the animation is done the pin desists and the page keeps on scrolling. Is there a way to make the animation occur and then have the item remain pinned without an animation for a certain distance scrolled before the next content? I go around this in some extent on my title by using expo.in as the ease, but that seems hacky and I would prefer this to work properly :-) (b) This is specific to the codepen.io listed. When you scroll down you get to a violet colored section which says 'You need to eat sausages', and then 'RIGHT NOW' flies in separately. This is working as intended (except for the problem of what I asked in a), but when you keep scrolling and the top of the viewport gets to the top of the RIGHT NOW container, the whole violet section jumps down to the center of the page. I checked in the common problems and there was a jumping issue but I struggled to see if it related to my problem. Thanks for any help :) Bogo

hi first of all sorry for my english im trying to replicate navigation menu of http://www.alsafarproject.org/en/map ,its kinda cool it has some skew on scrolling and its smooth and its multi stage, for example when you click on countries in menu submenu will comeup with a nice animation. so i try to make it with gsap becuase why not😃 so here is my long list of question: 1- why my last <li> element is not showing? 2-when i use a low divider in (self.getVelocity/-2000), like -300 when you switch scroll direction fast you will get some choppy skew animation,is there any way to smooth it out like the refreence site? 3- how to achive the submenu transition effect using gsap and vanilla js(by the way i think they use some overflow : hidden trick , but i havent any success for now)? thank you so much for your greate framework.

My goal is update a Three JS scene (colors, camera position, material properties, etc.) based on state properties set by the timeline. My scene is rendered inside of the BlobScene component which accepts an intensity prop. In the sample below, I'd like to update the intensity as the timeline is scrubbed which then updates the light intensity of my scene. In the pinned section, there are two columns: the left column contains text that will be translated into view and the right column contains the BlobScene. My ultimate goal is to change the color of the blob for each corresponding text section. So when the user scrolls from the red section to the green section, for example, the blob mesh would smoothly transition it's material color from red to green. Am I going about this the wrong way? I can create a minimal demo if needed. import React, { useState, useEffect } from "react" import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; import BlobScene from '../components/blob-scene' function Index() { let [intensity, setIntensity] = useState({value: 1.5}) useEffect(() => { gsap.registerPlugin(ScrollTrigger) // Verticals Pinned Section Story const tl = gsap.timeline() tl.from(".red", {y: "100%"}) .from(".green", {y: "100%"}) .from(".blue", {y: "100%"}); // PROBLEM LINE tl.to(intensity, { value: setIntensity(0.5) }) ScrollTrigger.create({ animation: tl, trigger: "#verticals", scroller: "#___gatsby", start: "top top", end: "+=4000", scrub: true, pin: true, anticipatePin: 1 }); // each time the window updates, we should refresh ScrollTrigger and then update LocomotiveScroll. ScrollTrigger.addEventListener('refresh', () => window.scroll.update()) ScrollTrigger.refresh() }, [intensity]); return ( <React.Fragment> <div className="page"> <section id="verticals" className="h-screen flex items-center relative w-full overflow-hidden"> <div className="grid grid-cols-2 gap-6 h-full w-full"> {/* Grid Column 1 */} <div className="flex items-center"> <div className="relative w-full overflow-hidden h-80"> <div className="panel absolute h-full w-full red bg-red-500 text-black"> <h2>Panel 1</h2> </div> <div className="panel absolute h-full w-full green bg-green-500"> <h2>Panel 2</h2> </div> <div className="panel absolute h-full w-full blue bg-blue-500"> <h2>Panel 3</h2> </div> </div> </div> {/* Grid Column 2 */} <div className="flex items-center"> <BlobScene intensity={intensity.value}></BlobScene> </div> </div> </section> </div> </React.Fragment> ) } export default Index

Can anyone help me out this. I just want sticky section with smooth scroll. https://codepen.io/farrukh1194/pen/KKNLOZY

Hi, I'm working on a pretty basic static scroll animation with scrolltrigger, but i have an issue where the section jumps after the animation is completed. The jump is super visible and I've been searching for a solution for close to a week now to no avail. It seems the issue is related to the translateY being added and removed to create the pin-spacing effect. Here's a link to a video showing the issue, if the issue isn't super obvious, i'll create a codepen and share that. Any help will be appreciated 🙏🏾

by some reason my element pins fine if i scroll slow, but if i scroll really fast pin start in a very offset position. What could be the issue ? For the smooth scrolling i am using simple LERP value i apply with transform:translate on my wrapper Also "document.documentElement.scrollTop" is available at any point in chrome console, so i don't think i am doing any scroll jacking according to scrolltrigger documentation. I did read about scrollerProxy() but i cant figure out how to connect it with my own scroll smoothing javascript and do i have to if everything else works exempt inconsistent pin start depends on how fast i scroll ? This are some pieces of my smooth scroll (no library used) let docScroll; const getPageYScroll = () => (docScroll = window.pageYOffset || document.documentElement.scrollTop); window.addEventListener("scroll", getPageYScroll); this.renderedStyles = { translationY: { // interpolated value previous: 0, // current value current: 0, // amount to interpolate ease: 0.15, // current value setter // in this case the value of the translation will be the same like the document scroll setValue: () => docScroll } }; // sets the initial value (no interpolation) - translate the scroll value for (const key in this.renderedStyles) { this.renderedStyles[key].current = this.renderedStyles[ key ].previous = this.renderedStyles[key].setValue(); } this.DOM.scrollable.style.transform = `translate3d(0,${-1 *this.renderedStyles.translationY.previous}px,0)`; This is my scrolltrigger pin: I have to use pinReparent since my smoothscroll wraps everything in div layer that is transformed Y let pin = ScrollTrigger.create({ id: "Pinned", trigger: ".pin-on", start: "50% 50%", end:"5000", pin: true, // scrub:1, pinReparent: true, markers:true, // pinSpacing:false, anticipatePin: 1 }) if this is not clear enough, let me know i will assemble simplified version of the issue

Hey guys, I have an issue an I'm looking for help. I have a page that has a parallax effect in all of the sections of a page whenever the user scrolls. So there are this black text blocks that are separated but whenever you scroll one of the blocks moves up to be next to the one on top, the issue is that this is causing a blank space between sections of the page. I want to know if there is a way, whenever the black text block moves up, to make the sections below move up as well, basically follow that text block whenever it goes up. I try this by just using a yPercent on the sections below, but is is just causing a blank space to be left on the bottom of the page Here is a link of how the animation should work https://drive.google.com/file/d/1EsKinyuID5buWKhQllRhE1Bmc6el5GTX/view and I left a codepen with the basic markup of my current pate. Any help would be appreciated.

Hi Guys, Thanks for this awesome gsap lib again. I'm still learning it but the library is really powerful and quite fun to explore. I need some help with the animation where my container gets pinned on screen and then the image is horizontally moved with the scrolling. This part works fine in the codepen above. What I need with this is for the text in the adjacent container to smoothly show hide along with this image movement. Obviously the number of texts will be the same as the image movements so that wont be a problem. Thanks for any help in advance.