Jump to content

Search the Community

Showing results for tags 'gsap'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge


  • Learning Center
  • Blog


  • Products
  • Plugins


  • Examples
  • Showcase


  • FAQ


  • ScrollTrigger Demos


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Personal Website



Company Website



  1. Hi, i'm trying to create an horizontal scroll on my gallery section. So i followed lot of tutorials, and compared my code to lot of codepen to understand why, my horizontal scroll doesn't works. Sometimes it works, but the section is not pinned, Sometimes the section is pinned but scroll doesn't works. What did i do wrong. Also i'm using tailwindCss. Here is my useLocoScroll Hook: import {gsap} from "gsap" import { ScrollTrigger } from "gsap/dist/ScrollTrigger" import LocomotiveScroll from "locomotive-scroll" import "locomotive-scroll/src/locomotive-scroll.scss" import { useEffect } from "react" gsap.registerPlugin(ScrollTrigger) const useLocoScroll = () => { useEffect(()=>{ const scrollEl = document.querySelector('#page-wrapper'); let locoScroll = new LocomotiveScroll({ el: scrollEl, smooth:true, multiplier:1, class: 'is-reveal', markers:true }) locoScroll.on('scroll', () => ScrollTrigger.update) ScrollTrigger.scrollerProxy(scrollEl, { scrollTop(value) { if (locoScroll) { return arguments.length ? locoScroll.scrollTo(value, 0, 0) : locoScroll.scroll.instance.scroll.y; } return null; }, getBoundingClientRect() { return {top: 0, left: 0, width: window.innerWidth, height: window.innerHeight}; }, pinType: scrollEl.style.transform ? "transform" : "fixed" }); const lsUpdate = () => { if (locoScroll) { locoScroll.update(); } }; ScrollTrigger.addEventListener("refresh", lsUpdate); ScrollTrigger.refresh(); return () => { if (locoScroll) { ScrollTrigger.removeEventListener("refresh", lsUpdate); locoScroll.destroy(); locoScroll = null; } }; }) } export default useLocoScroll And here my gallery component. import gsap from "gsap"; import { useEffect, useRef } from "react"; const Gallery = ({ data }) => { const ref = useRef(null); const projects = data.projects.data useEffect(() => { // This does not seem to work without a settimeout setTimeout(() => { let sections = gsap.utils.toArray(".gallery-item-wrapper"); const sectionWidth= ref.current.offsetWidth const scrollWidth = sectionWidth - window.innerWidth console.log(sections); console.log(ref.current.offsetWidth - window.innerWidth); gsap.to(sections, { scrollTrigger: { scroller: "#page-wrapper", scrub: true, trigger: ".sectionHorizontalScroll", pin: true, snap: 1 / (sections.length - 1), start: "top top", end: ()=> `+=${sectionWidth}`, markers: {startColor: "green", endColor: "red", fontSize: "12px"} }, x: -100 * (sections.length - 1), ease: "none", }); }); }, []); return( <section id="" className="h-screen w-max py-32 sectionHorizontalScroll" data-scroll-section > <div className="pinSectionHorizontalScroll"> <div className="flex flex-nowrap w-max" ref={ref} > { projects.map((project, index) => { return <GalleryItem mignature={project.attributes.mignature} title={project.attributes.title} key={project.attributes.title + "-" + index} /> }) } </div> </div> </section> ) } const GalleryItem = ({mignature, title}) => { return ( <div className="w-[50vh] gallery-item-wrapper" data-scroll> <h3 className="text-3xl font-bold text-grayPrimary">{title}</h3> </div> ) } export default Gallery At last, i added my locoScroll to my Layout like that: import ImageWebP from '../../components/ImageWebP' import Birds from './Canvas/Birds' import { Outlet } from "react-router-dom"; import Header from './Header'; import { useState } from 'react'; import CursorProvider from './CustomCursor'; import useLocoScroll from '../../services/useLocoScroll'; export default function Layout() { useLocoScroll(); const [isMenuOpen, toggleMenuOpen] = useState(false) return( <> <CursorProvider> <Header toggleMenu={toggleMenuOpen} isMenu={isMenuOpen}/> <section id='page' className={ 'h-full w-full relative transition-all' + (isMenuOpen ? " ml-96" : " ml-0") }> <section className='fixed left-0 top-0 w-screen h-screen -z-10'> <ImageWebP src={window.location.origin + "/assets/imgs/backrounds/background1.webp"} fallback={window.location.origin + "/assets/imgs/backrounds/background1.jpg"} classnames=" h-screen w-screen object-screen block " alt="A photo showing the expiration date on a box of Lucky Charms" className="object-cover h-full w-full" /> </section> <Birds /> <div id='page-wrapper' className=" w-full h-full min-h-screen z-30" data-scroll-container> <Outlet /> </div> </section> </CursorProvider> </> ) } Thank you if you take times to help me. There is the demo here: https://justhugo.fr
  2. Hi everyone ! I am planning to create this sort of website (refer to the video linked below) where as you can see the mockup of a phone, so in that phone, a lottie animation should run when the user scrolls down and in the right, you can see the heading and some description, while scrolling down, the phone's mockup is stuck through out and doesn't get scrolled down, only the animation inside it runs while the right side of the page (heading and text and all) gets scrolled down. (The phone part is what I have been able to pull off so far, but I am stuck with the part on the right) Please let me know how can I achieve this ? Thank you a lot in advance. @GSAP Helper @OSUblake (sorry for the audio in the video, kindly ignore)
  3. I have a div called fade and span called caption, I want GSAP to change the background color of fade and inner text of caption This code is changing the background color of element fade but it does not do with the element caption gsap.registerPlugin(TextPlugin); const colors = ["black", "#4d0000", "#800000", "#330000"]; let captions=['some text','some text','some text','some text']; const tl = gsap.timeline({ repeat: -1 }); for (let i = 0; i < colors.length; i++) { tl.to(fade, { duration: 0.4, backgroundColor: colors[i] }); tl.fromTo( caption, { text: { value: captions[i] }, opacity: 0 }, { duration: 3.5, opacity: 1 }, "<" ); } why the caption text is not changed although the background color is changed normally ?
  4. Basically i started a timeline tween, at that time i dont have the dom element mounted in the webpage is there any way to select dom element and animate in on the fly
  5. Hello guys, So I am facing a small problem related to scroll smoother and scroll trigger. I have explained the whole problem in this 4 mins video. Can anyone help me to get this fixed please. Video link: https://www.loom.com/share/11acaf84a85a40f8a616db46a7aacdb5 Thanks, Nafiul
  6. How do I start my animation opacity from o to 1 immediately when user is scrolling down to the next section? Here in this code. The animation is using percentage of the opacity. Would like to achieve a behavior wherein when a user is scrolling at the end of the pinned section. It will Fadeoutthe previous section and then Fadein the next section. Is this achievable? If so, what's the best option to modify the code I've given? Sorry, quite new to GSAP plugin and still learning the functionalities.
  7. I just started learning react.js with gsap and stuck at this point useEffect(() => { const cx = gsap.context(() => { const tl = gsap.timeline({ scrollTrigger: { trigger: '.home', start: 'top top', end: "+=" + window.innerHeight * 3, pin: true, scrub: 1 } }) }, main_ref) return ()=>{ cx.revert() } }) my question is that, How can I declare this timeline globally because I want to use this timeline in multiple components or there is any other way to perform the same thing. And yeah, this timeline is declared in the App.jsx file which is the main file of my project. Thanks in advance.
  8. I saw this site on awwwards: https://yuga.com/ It has hover effect that animate. Is this being done with Greensock? What program makes these hover effect objects? Any help is appreciated.
  9. Hi there, I'm looking for a developer with advanced skills in Three JS and GSAP. I want to replicate the same hover animation as here https://www.nightingale.world/projects/category/exposure/ I don't need styles or mouse position list moves. And it isn't important to have the same animation. I need to replicate fast image switching because I can't understand the logic. How do they update the timeline on uniform progress and image switch on every mouseenter with debouncing? If it were a slider, that would be easy, but here something more complicated. The task is to provide HTML and JS files or just a codepen. Thanks.
  10. The Scenario is I have a certain scroll animation at the top of the page and I need to pin whole wrapper. And I have a certain content whose title needs to be sticky. Now the problem is whenever I pin the whole section for the first animation, the sticky title pins weirdly as shown in codepen example. Am I missing something here? Thanks in advance Note: The sticky title pins fine whenever I just pin the section (not whole container ) of the first animation.
  11. Hi, I'm struggling to create a fade in/out animation to a pinned section using GSAP's horizontal scroll. What I'm trying to do is to fade in/out between sections, mainly the content and the background or an image inside each sections. I tried using this code function: function setSection(newSection) { if (newSection !== currentSection) { var tl = gsap.timeline(); tl.to(".col-fade", { y: -30, autoAlpha: 0, duration: 0.3 }); tl.to(currentSection, { autoAlpha: 0, duration: 0.5 }); var tl = gsap.timeline(); tl.to(newSection, { autoAlpha: 1, duration: 0.5 }); tl.to(".col-fade", { y: -30, autoAlpha: 1, duration: 0.3 }); currentSection = newSection; } } and set it to gsap.to(sections, {}); function like this: gsap.to(sections, { xPercent: -100 * (sections.length - 1), ease: "none", scrollTrigger: { trigger: ".container", pin: true, scrub: 1, snap: 1 / (sections.length - 1), end: () => "+=" + document.querySelector(".container").offsetWidth }, onToggle: (self) => self.isActive && setSection(sections) }); However, it doesn't seem to have an effect. Any Idea why I'm not able to successfully solve the issue? I'm still learning GSAP`s up to this point. Any ideas would be a great help. Thanks a lot.
  12. So i am trying to animate the cards at the end of the Page by ScrollTrigger. This page also contains a Initial loading animation of the Page getting revealed. My problem is that if i keep the Initial Page load animation then the ScrollTrigger dosen't work properly (As you can see in the demo) and thecards suddenly appears as soon as the end reaches without a proper animation. But if i remove the initial page load animation then the scrollTrigger animation works fine. Any solution why ? Demo link - Demo here
  13. How to scroll to only next element on mouse wheel and not to any other element ? how to scroll to specific element if I click from any random button from 1 - 5 ? (if I click from 1 - 5 or 5 - 1 incrementally it works fine but not with random button click) how to avoid dragging effect when I scroll in snap scrolling ? do you have any such examples where based on main div scroll, it's children is in sync ?
  14. Hello , i have this code made with react and Draggable , dont know why the left and right handler dont correctly set the width of the container , did i make a mistake , thanks in advance : https://codesandbox.io/s/confident-hermann-i8753p?file=/src/App.js
  15. How do I animate the circles one at a time? Im using react, the circles works just perfectly fine but the content animates at the same time and not based on the scroll. **You can scroll to view the content
  16. Clicking on a button triggers the number of item elements in a container div. I am animating the item elements using gsap flip. When the number of item elements reduces, the container div resizes to become smaller. However this resize happens too quick. While the item elements are animating they appear to be outside the container div which I don't want. I want the container div to resize slowly such that they always contain the item elements inside. I want to green box to always be around the items. I do not want the items over the text as shown in the attached pic.
  17. Sukru

    Gsap lag problem

    Hello, my question is a bit of a general problem in gsap projects, where I first open the pages, it seems as if the page crashes and freezes, then the animations are active, I am sharing a few examples, where do I make a mistake, can you help? Look at the text animations in these examples, it stops at startup, then the animation starts, that's exactly my problem. https://additive.netlify.app/ App js > https://sukruemanet.netlify.app/assets/js/gsap/app.js https://sukruemanet.netlify.app/ App js > https://additive.netlify.app/assets/js/gsap/app.js https://clever-seahorse-227af4.netlify.app/ App js > https://clever-seahorse-227af4.netlify.app/assets/js/gsap/app.js
  18. Hola comunidad, hice un ejemplo de un elemento pin con gsap y reaccion, creo que lo hice bien, me gustaria saber si hay alguna forma de optimizar el codigo o si esta bien planeado, intente hacer un arreglo con utils para lograr el efecto del texto pero no lo conseguí, solo pude hacerlo usando cada componente individualmente, ¿es posible lograr ese efecto con "gsap.utils.toArray"? Caja de arena: https://codesandbox.io/s/gsap-react-pin-scroll-24c7fc?file=/src/App.js
  19. I have defined some specific end value to the pinAnimation. And the BS4 have accordion with dynamic content. Here the issue is, the scrollHeight is not being refreshed when accordion collapses. I tried using ScrollTrigger.refresh() but it's not solving the issue too. Is there anyway to refresh the scroll height dynamically.
  20. I'm a beginner at GSAP. I have a complex SVG which runs perfectly in HTML. I'm trying to convert it into React by using GSAP. How can I convert the HTML SVG in react? Here's the link to HTML SVG: https://codesandbox.io/s/demo-svg-html-esf3dc?file=/index.html While you put hover over the circle it is animated. Here's the Link to my React App: https://codesandbox.io/s/framer-motion-svg----3333-zcvdk1?file=/src/components/MainSVG.js I try to put all curves parents' id in the motion path. I got an error. Now as you can see I just put only 1 path id in the motion path and all works like a mess. Here's a JS function but I don't know where and how to add that in react. Maybe if I add that to my code it will work. const existElementId = (e) => { return document.getElementById(e) } existElementId("circle" + 1) for (let i = 1; null != existElementId("circle" + i); i++) { console.log(existElementId("circle" + i)) let tl = gsap.timeline({ repeat: -1 }); tl.to("#dot" + i, { duration: document.querySelectorAll("#curve" + i + " path")[0].getTotalLength() / 200, ease: "none", motionPath: { path: "#curve" + i + " path", align: "#curve" + i + " path", alignOrigin: [0.5, 0.5], } }); tl.pause() existElementId("circle" + i).onmouseover = () => { tl.play() } existElementId("circle" + i).onmouseleave = () => { tl.pause().time(0) } } I'm expecting to get any solution/idea to make it like the index.html file.
  21. Is it possible to create that by code using GSAP?
  22. Hello everyone, i try to make this example https://codepen.io/oldskool123/pen/mdrrbyo in react js, but i don't understand why what I did does not work, I am applying what I saw in the documentation but it has not worked, I want to learn how to use this great tool but I have not been able to apply a more complex example in react js. I need some guidance, thanks. :') Here the code sanbox https://codesandbox.io/s/gsap-react-horizontal-scroll-mr4gb1?file=/src/App.js
  23. Hello! I have a usage problem and I'm wondering if what I'm trying to achieve is feasible with gsap. From the CodePen demo, I am looking for the following flow: 1. Scroll the page until section 2, not being 100vh, is at the top of the viewport 2. When section 2 is at the top, scroll the 3 images in the left part. The right part must remain fixed. Section 3 must remain visible and fixed during this scroll. 3. When the scrolling of the images is finished, resume the "normal" scrolling of the page (scroll into section 3) My problems: - In the current demo, I manage to have this sticky effect and get the images scrolling. However, the section below (section 3 in blue) is not visible when scrolling the images. I tried to set pinSpacing: false but I don't get the expected result. - At scroller_start, image 1 is well centered in the left part of section 2. I can't manage to configure the scroller_end so that image 3 is also centered in the left part of section 2, when the "normal" scroll resumes. Any help would be very much appreciated!
  24. Hey guys, i am trying to make an x amount of sections and i want each section to have its animation. The only thing is that i don't know how to adjust the height (or duration) for each section because i want each section's duration to vary. For example, in the codepen i provided i'd like: 1. for the first section to scroll 2000px , during that time the svg elements will move at a different speed upwards creating a parallax effect 2. for the second section the svg camera is coming up on top of the first section and zooming in its squared display (by scaling up the camera), at which point when the display's border touches the screen's viewport width the third section will appear from the center. So its duration should be longer than the first section's duration. Basically i want absolute control over the entrance and exit points of each section as well as their duration. I messed around with the start and end values of each section quite a lot and i can't wrap my head around it. Any help is greatly appreciated!
  25. When the page is reloaded, the animation is not performed. What is the problem? const array = [ { title: "Ref Element 1" }, { title: "Ref Element 2" }, { title: "Ref Element 3" } ]; export function Slider() { const titleH1Refs = useRef([]); titleH1Refs.current = []; //checking for an existing element in an array const addToRefsTitleH1 = el => { if (el && !titleH1Refs.current.includes(el)) { titleH1Refs.current.push(el); } }; //perform animation for all array elements useLayoutEffect(() => { titleH1Refs.current.forEach((element) => { gsap.from(element, { opacity: 0, y: 20, ease: Expo.easeInOut }) }) }, [titleH1Refs.current]); return ( <section className="container"> {array.map((element) => ( <div className="element" ref={addToRefs}>{element.title}</div> ))} </section> ); }