Search the Community

Hello, I am trying to create an animation where the overlapping pinned sections will do a fade in and out transition with full scroll. I've been searching all over the forums and tried myself but unfortunately not being able to create what I want. Here is a minimal demo: https://codesandbox.io/s/elated-nova-bt0fl4?file=/src/App.js By "full scroll", I mean waiting for the transition to complete even if the user forces the scroll to an in-between spot. Similar to how FullPage.js works but with fade transition instead of sliding. In the minimal demo, the transition happens too quickly. However, I also want to achieve a more delayed and smooth transition that is pleasing to the eye, just like every other cool animations created using GSAP! Looking forward to some help from the community. Some of the threads from the forums that I have already tried taking help from which are close to what I am trying to achieve are: I have also attached a screen recording of what I've come up with till now

Hello, I want to reduce the initial section height while scrolling and I do this, but there is a space between the section below it? Can you help?

Hi I am new to GSAP can you please guide me. I need gsap animation inside a slick slider where on each slider there will be gsap animation of images which will look like a video but I need this with full controls like next previous button. when i click on next button next slide should start from starting and same with previous button. Apart from this, there is a progress bar in bottom which will go with slides. Also, i have added codepen link where you can find slider functionality. I just need to insert gsap in this with smooth effect. Can you please check and guide me with the same. Thanks

Hi guys, I attach a codesandbox with the result I would like to achieve with gsap (but smoother). https://codesandbox.io/p/sandbox/charming-leaf-o1w7xb?file=%2Fpages%2Findex.vue&selection=[{"endColumn"%3A1%2C"endLineNumber"%3A57%2C"startColumn"%3A1%2C"startLineNumber"%3A1}]&workspace=%7B%22activeFileId%22%3A%22cl9zkslmo000hlsgzg75u0gum%22%2C%22openFiles%22%3A%5B%22%2Fpages%2Findex.vue%22%5D%2C%22sidebarPanel%22%3A%22EXPLORER%22%2C%22gitSidebarPanel%22%3A%22COMMIT%22%2C%22spaces%22%3A%7B%22clbdl1aza00103b6g4eqbzi2v%22%3A%7B%22key%22%3A%22clbdl1aza00103b6g4eqbzi2v%22%2C%22name%22%3A%22Default%22%2C%22devtools%22%3A%5B%7B%22type%22%3A%22PREVIEW%22%2C%22taskId%22%3A%22dev%22%2C%22port%22%3A3000%2C%22key%22%3A%22clbdl1aza00113b6gctyx602v%22%2C%22isMinimized%22%3Afalse%7D%5D%7D%7D%2C%22currentSpace%22%3A%22clbdl1aza00103b6g4eqbzi2v%22%2C%22spacesOrder%22%3A%5B%22clbdl1aza00103b6g4eqbzi2v%22%5D%7D is it possible to apply this type of animation to the transition component? What I would like to achieve is an animation that comes from top to bottom and with a fade-in effect (I'm using @nuxt/gsap). Thanks to anyone who can help me!

Hello, I want the footer part to come from the bottom like a parallax. I did it partially, but there is a space at the bottom. Can you help with this?

I wan't to have a google search result page like sticky header animation with gsap, how can i do it.

Hello, the problem I'm facing is that when I scroll pin, the top part gets darker and smaller slowly. I made it smaller, but I couldn't center the beginning in the darkening part, you will see other markers. When I do " start: "center center , end: center center"," the markers do not appear. When the site is first opened, it is not actually white, but actually a very slightly dark color. This should not happen with white > and then > dark tone with scroll... I would appreciate it if you could help. I am sharing the test link I made in this project. https://clever-seahorse-227af4.netlify.app/

Hey everyone, I really new to gsap. Im currently working on a pretty big project in ReactJS with ScrollMagic. Im trying to use gsap for the Text portions of the Animations... and I cant figure out whats wrong. Im trying to do a simple Fade in - Fade out animation on scroll triggers. The current state of the project is hoster on Here and below are the JS and CSS Files related to this.. if someone who knows a bit more than me can help me out.. it would be great JS import { React} from 'react' import { motion, useAnimation } from "framer-motion"; import { useInView } from "react-intersection-observer"; import { useEffect } from "react"; import { Controller, Scene } from "react-scrollmagic"; import Sequence from "./Sequence"; import { gsap, ScrollTrigger } from "gsap/all"; import { useRef } from 'react'; gsap.registerPlugin(ScrollTrigger); export default function Scrollmagic() { const control = useAnimation() const [ref, inView] = useInView() const boxVariant = { visible: { opacity: 1, scale: 1 }, hidden: { opacity: 0, scale: 0 }, } useEffect(() => { if (inView) { control.start("visible"); } }, [control, inView]); const root = useRef(); const q = gsap.utils.selector(root); useEffect(() => { gsap.to(q(".b"), { x: 400, scrollTrigger: { trigger: q(".b"), start: "45% 60%", end: "+=4300", duration: 1.5, delay: 1, opacity: 0, stagger: 0.02, y: 30, ease:"power1.out", markers: true, id: "scrub" /* gsap.to(q(".b"), { x: 400, rotation: 360, scrollTrigger: { trigger: q(".b"), start: "top center", end: "top 100px", scrub: true, markers: true, id: "scrub"*/ } })}); return ( <div className="wrapper"> <div id="root"></div> <Controller> <Scene duration="200%" triggerHook="0" pin> {progress => ( <div ref={root} style={{ width: "100%", height: "100vh", position: "relative" }}> <div class="box b">Test Text </div> <Sequence ref={ref} progress={progress} /> </div> )} </Scene> </Controller> </div> ) } CSS .stickyblock{ position:absolute; bottom:50%; left:12.5%; right:12.5%; margin-top: 50%; color:#fff; font-family: "Montserrat"; font-weight: bold; font-size: 50px; z-index: 30000; } .box { height: 100px; position: absolute; left: 100px; font-size: 50px; color:#fff; font-family: "Montserrat"; font-weight: bold; font-size: 50px; z-index: 30000; } .b { top: 400px; }

Hello, I want the content part to be pin and scroll by hovering over the start part. One problem is that the content doesn't get auto height and scrolls gradually. Example website; https://www.rose-island.co/

Hello, first of all I'm in love with GSAP and everything that it can do! I need a bit of help with the DrawSVG Plugin though. As you can see in the Codepen I provided I have three lines. So the first one (yellow) should draw itself on page load. The other two should draw with scrolling, but the third one should only start after the first one is finished. How do I accomplish this with scrolltrigger and drawSVG. Would be very thankful about every help provided!! Thank you!

Hi, when I add multiple videos, the video scrolltrigger is also giving problems. Can you help me?

I try to do when I scroll down, the top section which name is "container" will be pin and I saw it' pinned but scrub not working, and another the image will be go one by one layout

Hello, I want to play and pause video with horizontal scrolltrigger. I did the playback but couldn't find a solution to stop it. Can you help me?

Hi there, does anyone know how I can bind that slider I createt using dragdealer to a lottie animation? I know that you can bind a timeline to an input like this, but i dont know how to translate to the right frame of a lottie animation. I would really appreciate any help, thanks.

Hello, with vertical scroll, we can make parallax or scrolling effect very simply with data-speed="value". How can we do this with horizontal scroll? Is there a method? An example I created to do this; https://codepen.io/sukruemanet/pen/dyKWeOg

Hello, I want to make a stream like on this site. I partially succeeded, but I can't control the parallax. The parallax in the blue background that comes after CHAPTER 01 comes into play long ago and the right part looks bad. Actually, I have to give a container a 100% width and the main container a 300% width right now, I couldn't get it to get the width automatically. Can you help me? My sample site https://transmissions.cristobalbalenciagamuseoa.com/2019-21/moe-matsuoka.html

Hi everyone, Im trying to use ScrollTrigger with Next.js. I just coppied https://codesandbox.io/s/gsap-scrollsmoother-next-js-starter-0h67eh?file=/pages/index.js but my example not work like that. boxC moving a little bit between start and end position, after it jumps 150-200px and it moves again with scrolling. Thanks Screen Recording 2022-11-10 at 21.45.18.mov

Hello, I came across a website from the Showcase on GSAP, and I really liked the animation they'd done when switching/changing between the pages, and below is the website for the reference. https://andersonsupply.com/ I tried to checkout the GSAP Products but unable to find what kind of Page Transition they'd used using GSAP, can anyone help me with that how I can add the similar Page Transition in Nextjs using GSAP? waiting for your valuable reply, Regards, Dhaval

I want to do scroll down animation using GSAP ScrollTrigger in my Angular project like this . https://codepen.io/sanjuu01/pen/vYLmPPV?editors=1010 I tried this but this is not working. I don't know where i did a mistake. How to solve this import {Component, HostListener, OnInit } from '@angular/core'; import 'gsap'; import {TimelineMax} from 'gsap/gsap-core'; import Draggable from 'gsap/Draggable'; import ScrollTrigger from 'gsap/ScrollTrigger'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'] }) export class AppComponent implements OnInit { scrollBox = new TimelineMax({paused: true, reversed: true, scrollTrigger: { trigger: '.box', pin: true, start: 'top top', end: 'bottom bottom', markers: true, toggleActions: 'play none none reverse', } }); constructor() { } ngOnInit() { this.scrollTgr(); gsap.registerPlugin(ScrollTrigger, Draggable, MotionPathPlugin); } scrollTgr() { this.scrollBox.from('.box', { y: 30, opacity: 0 }); this.scrollBox.to('.box', { y: 0, opacity: 1 }); this.scrollBox.play(); } } https://stackblitz.com/edit/angular-scroll-trigger?file=src%2Fapp%2Fapp.component.ts

Hey, Hopefully a simple one for someone who's been using gsap more than a day I'm just trying to cut down on the number of gsap.to animations I'm calling, but I'm unable to get any animation happening when passing evt.currentTarget as it's always null - I also tried evt.target & event.target.id to no avail document.getElementById("menuitem0").addEventListener("mouseenter", hoverIn); function hoverIn(evt) { console.log(evt); gsap.to(evt.currentTarget, { scale: 1.5, color: "white", duration: 0.3, paused: true, ease: "power2.inOut" }); } I saw you can do something like this let hover1 = gsap.to(menuitem1, { scale: 1.5, color: "white", duration: 0.3, paused: true, ease: "power2.inOut" }); document.getElementById("menuitem1").addEventListener("mouseenter", () => hover1.play()); document.getElementById("menuitem1").addEventListener("mouseleave", () => hover1.reverse()); but need to removeEventListener, so needed to break the function out Any help is much appreciated

Hello, I want to close the content that I opened with the Menu button with the same button. I use scroll pause when opening the menu, but to cancel it "smoother.paused(false);" I have to use is there a method like toggleclass for this? Can you help me? The code i use; $(".hamburgerMenuOpen").click(function () { smoother.paused(true); $(".menu").addClass("visible"); }); //Hamburger Menu Close $(".hamburgerMenuClose").click(function () { smoother.paused(false); $(".menu").removeClass("visible"); });

Hello, I actually want to stop the scroll and parallax effects that are not normal effects on mobile devices. I used a code for this, but smoothscroll still works. can you help me? You can view the project here, thank you very much. http://clients.super-agency.com/test/dy/ I'm using the code below, it turns off the parallax, but the smooth scroll effect still works. I want browser default scrolll on mobile devices. console.clear(); gsap.registerPlugin(ScrollTrigger, ScrollSmoother, SplitText); let smoother = ScrollSmoother.create({ wrapper: "#smoother-wrapper", content: "#smoother-content", smooth: 1, smoothTouch: 0.1, normalizeScroll: true, ignoreMobileResize: true, effects: ScrollTrigger.isTouch === 1 ? false : true, });

Hi, I want to do something similar to history. There will be years and articles and photographs of that year. And I want to make them parallax when scrolling horizontally. I created a demo codepen. I thought I did that because each panel class needs to have auto-width in itself, but everything overlaps. I am sharing a site as an example. https://transmissions.cristobalbalenciagamuseoa.com/2019-21/moe-matsuoka.html Thank you so much...

Hi guys im trying to use scrollsmoother on my website with tailwindcss however whenever i add data speed to an element it causes the element to just be fixed to the final position relative to where its heading according to the scrollsmoother if it were to smooth the divs on scroll . I have no idea why this is happening, i tried forking other scrollsmoother demos without tailwind and had no issues whatsoever. if someone could provide me with an explanation and or solution it would be much appreciated. Ive attached a codesandbox demo below however i have no idea how to attach the gsap scrollsmother dependency but i linked all the necessary code files within the sandbox. Sorry guys im very new to using codesandbox. I also have images below of the issue. https://codesandbox.io/s/zen-lake-pxlpm0