Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for tags 'scrolltrigger'.

  • 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


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 animated bar chart that should only animate its barse when scrolled into view. I use jquery to target each chart on the page, then iterate through each set and the bars in each set to set each bar to trigger its animation when the chart as a whole scrolls into view. Each bar is also given an increasing delay so that the cascade on. The problem is, the delay doesn't get applied if scrollTrigger is being used. In the codepen, if you comment out the scrollTrigger lins (26-29), you'll see the delay works. What am I missing here to get this to work? Or is there a more performant/appropriate way to go about this?
  2. Here is description, please DM me. It's urgent, but won't take more than 4 hours for professional.
  3. Hello. Is it possible to do masked gradient reveal text or image like on https://www.apple.com/iphone-12-pro/ 1. I want to reveal first headers on page load like on iphone presentation. It's reaveling left to right. 2. Other sections i want to reveal on scroll trigger with scrub option with gradient also.
  4. Hi everyone! I am new to GSAP animation. Faced a problem with the 'scrub' property. Found little information on this property in the docs. Any comments would be welcome. Forgive me for my English, I am from Russia! I hope you got what I meant =)
  5. Hi, I have a question about the ScrollTrigger Image lazy loading. The demo sample uses HTML markup like this: <section class="preloadSection"> <div class="deferredImageContainer"> <img class="deferredImage" width="1200" height="600" src="https://picsum.photos/id/237/20/10" data-src="https://picsum.photos/id/237/1200/600"> </div> </section> Is it possible to do this much simplified? As follows: <img class="lazy" src="https://picsum.photos/id/237/20/10" data-src="https://picsum.photos/id/237/1200/600"> Thanks.
  6. https://hopeful-almeida-c45621.netlify.app Hi, I couldn't get this to work on codepen, so on codepen is my code and in the netlify-link is how it looks like right now. If anyone can help me how to make it work on codepen it's obviously a big bonus My actual questions are: 1) How can I pin my page2 so that all the content that is scolling fits. At the moment the pin lets go a bit too soon, making me miss the last lines of text under the header "seven". 2) My image in page2 is moving downwards as I scroll, even though I've tried to pin it. Why, and how can I fix this? The goal: Is to pin the entire page2 and the image as long as the text scrolls. I might try to do something with the text to eventually, but I feel I have to get the pinning working first. Thank you very much for your time 😃
  7. Hi guys, I just built this carousel using ScrollTrigger. Scrolling down the container does two things : (1) it translates the inner grid on the x-axis and (2) it changes the scale of the images based on their location (the closer to the left it is, the bigger it becomes—up to a certain point). In order to get (2) working, I used an onUpdate callback. Every time the progress updates, the callback loops through the images array and determine each of their scaling value based on their index and the current progress value: const step = 1 / (images.length - 1); gsap.to('#grid', { ease: 'none', scrollTrigger: { end: () => `+=${-computeTransateX()}`, onUpdate: ({ progress }) => { images.forEach((image, index) => { const threshold = index / (images.length - 1); const factor = _.clamp(1 + ((threshold - progress) / step) * -0.3, scaleMin, scaleMax); image.style.transform = `scale(${factor})`; }); }, pin: true, scrub: true, snap: { duration: {min: 0.1, max: 0.3}, snapTo: step, }, trigger: container, }, translateX: computeTransateX, }); Everything works as expected. My question here is about efficiency. From what I understand, ScrollTrigger computes a great deal of stuff beforehand to maximise the performance. Wouldn't having such a loop inside an onUpdate callback go against this philosophy? If yes, what would you recommend me doing? Thanks in advance 🙏
  8. Hey guys, I'm very new here (& not all that great with programming) - long time lurker, big admirer of GSAP and happy be in the club! I'm hoping somebody here can help me figure out what I'm doing wrong. I'm basically attempting to convert this simple CodePen into Frontity/React (embed at bottom of post). Here's the link to my CodeSandbox https://codesandbox.io/s/xenodochial-saha-mfj42?file=/packages/mars-theme/src/components/test-scroll.js The errors I get seem to come from my scroll-test.js file. No matter what I do, I can't seem to get any ScrollTrigger action (or even basic 'to' motion). There have been some phantom moments once I've changed some code to target a different element, the page instantly begins to animate - but after I refresh, I'm given fatal errors instead. Not really sure what that is... If I attempt to target certain elements, it won't run. If I target a previously declared component, it at least runs - but it claims scrollTrigger is an invalid property I'm left to believe that GSAP isn't properly firing. Any ideas for troubleshooting this problem? Happy to supply any additional information requested. I tried to follow the rules and created my problem on codesandbox, since it was the only service that had Frontity available. Cheers, AGW
  9. I'm building a landing page using React Router that has a scrolling menu. Based on the position of the scrolling menu, the background elements change. Everything works, until I navigate to a different page, and receive Uncaught TypeError: Cannot read property 'classList' of null. When I return to the landing page, the ScrollTrigger is broken until the site is refreshed. I know this is due to the component unmounting and ScrollTrigger not being able to find the elements triggering onLeave and onLeaveBack. I tried using useLocation() to make sure ScrollTrigger instantiate when the the pathname = "/" and otherwise kill() the trigger, but it didn't solve the issue. So the question is, how do I navigate away from my landing page without having my ScrollTrigger break and require a full refresh? Here is the structure of my ScrollTrigger: const pages = ["radio", "shop", "music", "about", "news"]; useEffect(() => { const backgroundSquare = document.querySelector(".home-menu-background"); pages.forEach((page) => { gsap.to(`#home-menu-item-${page}`, { scrollTrigger: { trigger: `#home-menu-item-${page}`, start: "top center", end: "bottom center", onEnter: () => { backgroundSquare.style.backgroundImage = `url("${backgroundImages[page]}")`; document.querySelector(`#home-menu-item-${page}`).classList.add("active"); }, onEnterBack: () => { backgroundSquare.style.backgroundImage = `url("${backgroundImages[page]}")`; document.querySelector(`#home-menu-item-${page}`).classList.add("active"); }, onLeave: () => { document.querySelector(`#home-menu-item-${page}`).classList.remove("active"); }, onLeaveBack: () => { document.querySelector(`#home-menu-item-${page}`).classList.remove("active"); }, }, }); }); });
  10. Hey guys, Couldn't find any info in the docs about using ScrollTrigger.matchMedia and pointers? I tried it with pointer:coarse and it didn't seem to register? Is this a feature / would it be in the future? Something like below. Thanks heaps ScrollTrigger.matchMedia({ "(pointer: coarse)": function() { // setup animations and ScrollTriggers for pointer: coarse?? }, });
  11. Requirements: We have Image sequence of background animation, We want freelancer who can sync text with the background at specific location. Similar to this: But using this approach: https://greensock.com/forums/topic/25188-airpods-image-sequence-animation-using-scrolltrigger/?do=findComment&comment=121602&_backrid=93563
  12. Hey guys, I am using gsap for the first time in Angular and was trying the Scrolltrigger. In my localhost all works fine with this code: import { gsap } from 'gsap'; import { ScrollTrigger } from 'gsap/ScrollTrigger'; ngOnInit(): void { // GSAP Animations gsap.registerPlugin(ScrollTrigger); this.ScrollAnimations(); } ScrollAnimations() { document.querySelectorAll('.readmore-block').forEach((box) => { const scrollBox = gsap.timeline({ scrollTrigger: { trigger: box, start: 'top bottom', markers: false, scrub: 1, end: 'top center', }, }); scrollBox.from(box, { opacity: 0 }); }); } The boxes faded in nicely but now we come to my problem. I use "ng build --prod" to generate my project and loaded it on my server. If I now look on my page, there isn't any animation and I got the following error in console: Invalid property scrollTrigger set to {trigger: p.readmore-block.fadeIn.ng-tns-c45-3, start: "top bottom", markers: false, scrub: 1, end: "top center"} Missing plugin? gsap.registerPlugin() Can anyone help me out? Greetings, Niklas
  13. Hi, I have had this issue in multiple sites where I am using scrolltrigger and animating the y property. This is what happens on an <a> tag for example (see screenshot). I have had this issue also appear on normal <div> that have border properties. I have also tried to replace the border with outline for example but same thing happens. When I hover over it, the border corrects itself and looks fine after that. Also when you change some properties through "inspect element" in chrome for example. The error also occurs in Microsoft EDGE, but have not seen it in firefox or safari. One fix that seems to work is to not use the transform property Y but the basic TOP property. I prefer to use the Y property however. Does anyone know how to fix this issue? This is my code: JS gsap.registerPlugin(ScrollTrigger); setTimeout(function(){ ScrollTrigger.batch('.animate-in', { onEnter: batch => gsap.to(batch, {autoAlpha: 1, y: 0, ease: "power2.out", duration: 1.6, delay: 0.15}), }); }, 100); CSS animation: .animate-in { opacity: 0; transform: translateY(80px); } CSS button: .button { border: 1px solid $black; background-color: transparent; display: inline-flex; align-self: center; transition: all ease-out 300ms; padding-top: 15px; padding-bottom: 16px; padding-left: 22px; padding-right: 22px; }
  14. Hey guys, i need a little help with this one. I have multiple elements with the same class on the page. And i want to animate on the one that is entering the viewport. I thought that scrollTrigger only takes the element in the viewport and animate that exact one. Pls advice. Many thanks
  15. Hey guys, I'm new to gsap, and I want to first thank you all for this amazing library. The examples look pretty neat! Secondly, I'm seeking for some advice or some light on how to implement this crazy animation. * The idea is to have an image centered in the screen with a width based on viewport-width: say 70% initial * When user scrolls (scrub: true) the image has to scale up to occupy the 100% of the viewport width. and this animation has to stop at that point. In this example you see the image (blue-border) being larger than the viewport height and it goes over the bottom of the screen. * When the user keeps scrolling, the image should be kept scaled and scroll normally so we reveal the remaining section of the image. In this example you see the image (blue-border) being larger than the viewport height and now it's over the top of the screen. * When the user keeps scrolling, and only after the bottom of the image (scaled-up) touches the bottom of the viewport, the image will finally scale-down to it's original size I would appreciate any guidance you could provide me.!
  16. Hello, I'm really worried by a problem i have for a gsap scrollTrigger animation i try to implement in a nested Nuxt component. When previewing with markers activated, it appears that the start and end of the trigger are fixed, and not at all near the designated div. Sorry for the tailwind flood in the code - I've already successfully made gsap scrolltrigger animations with tailwind, but it was not in a nested component. I use GSAP with CDN, and scrolltrigger was doing well on other projects. My hypothesis is that the problem is related to a mounting + viewport-height + nested component stuff, but I'm stil lnew to this and i can't understand the problem. In this example, I use refs, but I've already tried a thousand times with a class trigger too (for example, <div class="trigger">) <template> <div ref="trigger" class='w-full h-screen text-black justify-center flex-1 align-middle my-auto relative p-4 pr-8 flex flex-grow bg-white box-border z-5'> <div class="relative flex h-full w-full flex-col"> <div class="flex h-full w-full shadow-inner bg-mastro2 absolute z-5 bg-cover bg-top">huh ?</div> </div> <div ref="carte" class="absolute overflow-scroll flex h-screen justify-end ml-auto "> <div class='p-5 rounded-xl bg-white bg-opacity-70 my-auto mr-10 z-6 flex flex-col w-1/2 justify-center'> <div class='loader_title font-display mb-4 text-gray-700 text-left leading-none text-5xl'>Votre point de départ idéal pour la CÎte d'Azur.</div> <div class='loader_legend font-sans text justify'>Lorem ipsum dolor sit amet consectetur adipisicing elit. Titae facere, voluptate vero ea a eius. .</div> <div class='loader_button mt-4 '><button @click="carta()" class="bg-opacity-50 hover:bg-opacity-100 border border-black p-3 w-32 text-center outline-none text-black bg-white">RESERVER</button></div> </div> </div> </div> </template> <script> export default { mounted() { const { trigger, carte } = this.$refs let hero_scroll = gsap.timeline({ scrollTrigger: { trigger: trigger, start: 'top center', end: 'bottom center', markers:true, scrub: true, } }) .to(carte, { x: -200, duration:3 }).reverse() }} </script>
  17. I am trying to use GSAP with a NextJS project, everything looks fine but for some reasons I am not able to scroll up or down whenever the mouse cursor is on top of the pinned element but it works when I move the mouse away from the pinned element and scroll again, any help is appreciated. I am attaching the code below. Component code import React, { useEffect, useRef } from "react"; import styles from "./Landing.module.sass"; // GSAP import { gsap } from "gsap/dist/gsap"; import { ScrollTrigger } from "gsap/dist/ScrollTrigger"; export default function Hero() { const scoutHeroTrigger = useRef(); const scoutHeroMobile = useRef(); const scoutHeroWrapper = useRef() useEffect(() => { gsap.registerPlugin(ScrollTrigger); let timeline = gsap.timeline({ scrollTrigger: { trigger: scoutHeroMobile.current, pin: true, markers: true, start: "center center", end: "+=100 +=200", anticipatePin: true, pinReparent: true }, }); timeline.from(scoutHeroMobile.current, { right: -100, opacity: 1 }); }, []); return ( <div ref={scoutHeroTrigger}> <div ref={scoutHeroWrapper} className={styles.scoutHeroWrapper}> <div className={styles.scountIndexSVGContainer}> <svg viewBox="0 0 100 100" preserveAspectRatio="none"> <polygon points="0,100 100,0 100,100" /> </svg>{" "} <img className={styles.scoutIndexLeftBlue} src="/assets/images/blue-tape-left.svg" /> <img className={styles.scoutIndexLeftGrey} src="/assets/images/grey-tape-left.svg" /> <img className={styles.scoutIndexRightGrey} src="/assets/images/grey-tape-right.svg" /> <img className={styles.scoutIndexRightBlue} src="/assets/images/blue-tape-right.svg" /> <img className={styles.scoutIndexRightWhite} src="/assets/images/white-tape-right.svg" /> </div> <div className={styles.scoutHeroContainer}> <div className={["scout-row scout-h-100", styles.scoutHeroRow].join(" ")}> <div className={[ "scout-col-8 scout-col-lg-12", styles.scoutHeroLeftCol, ].join(" ")} > <h1> Property details — <br /> in your hand. </h1> <button>Learn More</button> </div> <div className={[ "scout-col-4 scout-no-gutter scout-col-lg-12", styles.scoutHeroRightCol, ].join(" ")} > <img ref={scoutHeroMobile} style={{ zIndex: 99, right: 0 }} src="/assets/images/hero-phone.png" /> </div> </div> </div> </div> </div> ); } Sass File .scoutLandingNav height: 72px width: 100% background: #111 position: fixed left: 0 top: 0 z-index: 100 .scoutLandingNavContainer max-width: 1200px padding: 0 16px margin: 0 auto height: 100% div .scoutLandingNavLeftCol display: flex align-items: center ul margin-left: 32px list-style-type: none li margin-left: 40px float: left a font-weight: 500 font-size: 14px line-height: 20px display: block .scoutLandingNavRightCol display: flex justify-content: flex-end align-items: center button border: none width: 85px height: 40px outline: none background: #FFFFFF border-radius: 8px font-weight: 500 font-size: 14px line-height: 20px color: #111111 cursor: pointer .scoutHeroWrapper position: relative background: #111111 margin-top: 72px height: 780px .scountIndexSVGContainer position: absolute bottom: 0 width: 100% height: 10vw svg position: absolute bottom: 0 width: 100% height: 10vw fill: #fff .scoutIndexLeftBlue position: absolute bottom: -6.8px z-index: 1 transform: rotate(1.5deg) !important .scoutIndexLeftGrey position: absolute bottom: -87.1px z-index: 1 left: -5px transform: rotate(1.5deg) !important .scoutIndexRightGrey position: absolute top: -71.1px z-index: 1 right: 0 transform: rotate(1.45deg) !important .scoutIndexRightBlue position: absolute top: -33.6px z-index: 1 right: -5px transform: rotate(1.5deg) !important .scoutIndexRightWhite position: absolute top: -128.6px z-index: 1 right: 30px transform: rotate(1.5deg) !important .scoutHeroContainer max-width: 1200px margin: 0 auto height: 100% padding: 16px .scoutHeroRow align-items: flex-start !important .scoutHeroLeftCol h1 font-size: 72px line-height: 98px color: #FFFFFF margin-top: 168px font-family: "Space Grotesk" font-weight: 700 button background: #FFFFFF border-radius: 8px width: 196px height: 62px margin-top: 32px font-size: 20px line-height: 30px cursor: pointer border: none transition: .1s button:hover transform: scale(1.05) .scoutHeroRightCol position: relative img position: relative top: 72px
  18. I've encountered a problem with my start & end position on my ScrollTrigger. This is how the start and end position should be, and every time I save after writing a code the position is correct. However.. When I refresh the page the start & end position gets buggy. The start & end position does not align with the top and the bottom of the container to the left. This is the scrollTrigger code useEffect(() => { const el = cardRef.current ScrollTrigger.create({ trigger : el, start : 'top center ', end: 'bottom center', onEnter : () => { playVideo() store.dispatch(currentElementHover(techNames())) cardRef.current.classList.toggle('cardFocus') }, onEnterBack : () => { playVideo() store.dispatch(currentElementHover(techNames())) cardRef.current.classList.toggle('cardFocus') }, onLeave : () => { resetVideo() store.dispatch(currentElementHover([])) cardRef.current.classList.toggle('cardFocus') }, onLeaveBack : () => { resetVideo() store.dispatch(currentElementHover([])) cardRef.current.classList.toggle('cardFocus') }, markers : true }) },[]) Any help would be appreciated greatly!
  19. Hello! I got a problem: I created a block that is a trigger for two child blocks. When scrolling the page, the parent block is pinned first until the animation of the first child block ends, and then again until the animation of the second child block ends. In this situation, when the page is resized, the parent block moves down to its own height each time. How to properly organize this animation?
  20. Hey! I have a problem with ScrollTrigger, I have a container with images and I want horizontal scroll for them and some additional animations, So I took working code and tried to take ScrollTrigger and put it directly inside timeline, but can't understand why it's not working. As you can see in commented area is working code. Can you help me, please?
  21. Issue: On mobile, an element (id = lens1_lens) I'd like stay fixed in the middle of the page, jumps up slightly after scrolling in Chrome for Android. This issue is not present on any desktop browser that I've witnessed. Behind the scenes, I am using scrollTrigger to slightly move the faint fixed circle on scroll. CSS positioning-wise I am using the following: .home__lens { position: fixed; top: 50%; left: 50%; width: calc(100vh / 2); height: calc(100vh / 2); background: radial-gradient(50% 50% at 50% 50%, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0.13) 95.34%, rgba(255, 255, 255, 0.2) 100%); overflow: hidden; transform: translate(-50%, -50%); @include opacity(.88); @include borderRadius(50%); mix-blend-mode: normal; @include mobile { width: 262px; height: 262px; } } I suspect it's partially due to vh on mobile, and how that's calculated. I would like to avoid using JavaScript to position if possible. Below is the public repo to my code (GitHub pages project using Jekyll) as well as a live example to demo on mobile. Repo Live Experience (issue is evident on mobile [Chrome for Android, haven't tested on iOS yet]) Thanks for your help in advance.
  22. https://edidiongasikpo.com/using-gsap-scrolltrigger-plugin-in-react
  23. Hey guys , where is my mistake here , I want to have fade in - out between sections without to scroll down, example I don't ask for any 3d animation , I just want to know why the fade in - out not working. Thanks
  24. Hi everyone, I'm trying to reproduce the following scroll animation on sections This is very close to the "Layered Pinning From Bottom" example given in the ScrollTrigger documentation but with 80% height sections + scale animation. I thought it would be easy to achieve by inspiring myself with the documentation example. Surprisingly, it has now been more than 2 days that I'm struggling with this animation without being successful. Before asking for your help, I've done research and tried many different way of doing it. Among all the numerous attempts I made, the closest to the expected result is the following https://codepen.io/sebastienthiriet/pen/VwmZggv It "more or less" works - but it does not look good as in my reference... I found the stagger setting by manual iterations, which is always a hint that we're not on the right path Plus, my animation is presenting a kind of parallax effect when sections are animating concurrently which is not present in the animation of my web reference. And finally, I do not know how to add a scale animation on the child img tags that each section includes... If someone could help on this, that would be very much appreciated, Best regards, Sebastien
  25. The animation work, but so fast, how i can control the duration or the speed for this scroll ?