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 am new to gsap and I am unable to achieve what I want using scrollTrigger . I want the article that is not on page to revel animation on scroll but it gets finished with other animations. I already saw Most Common ScrollTrigger Mistakes but didn't got the answer that I wanted. Below is the code and video sample const Aboutpg = gsap.timeline({ delay: 0.5, ease: 'power4.out' }); Aboutpg.from('.aboutme h1', { y: 200, duration: 0.8, opacity: 0, skewY: 10, }); Aboutpg.from('.aboutme article', { scrollTrigger: '.aboutme article', y: 150, duration: 0.8, opacity: 0, stagger: 0.2, skewY: 10, }); Untitled.mp4
  2. Im using GSAP ScrollTriggers to animate stuff in when they enter the viewport. Right now im using ScrollTrigger.batch to stagger animations inside my footer. It works somewhat fine. but the triggers them self seem kinda random. When i have markers turned on, they for the most part seem to work as intended. But only because the markers extend the bottom margin of the footer and there by extend the height of the page. But sometimes, the markers end up above the footer, and trigger the animations before they are in the view port. If i turn off the markers the most common result is the same as above. they get triggered before they are in the view port. with the added bonus, that the last elements, the links, dont trigger at all. I also recently discovered that on bigger screens, it seems to work fine. I was wondering if it is possible to set the footer tag it self as the trigger so that when it enters the viewport, it triggers the staggered animation of the span elements. How would I go about doing that? Thank you in advance for the help
  3. Hi, I've been using gsap and multiple plugins over the last couple weeks. For the most part I've found my way around but been stuck on this for the past day. The pen is a minimized version of what I'm trying to achieve, which is a pinned panel that rolls through 7 sections (all full-screen), and some of the panels have a lottie animation tied to it via ScrollTrigger. I got the panel to work, but tweaking timings is getting complicated, which I'm trying to solve via using a master timeline so the timings are contained. The timeline bit seems to work but I can't seem to get lottie to fire up correctly. Also any pointers on the rest of the code is appreciated as I'm sure there's a lot to be improved. Thanks in advance
  4. Hi everyone, I am new to GSAP. trying to create a Shrinking header animation. I am trying to reduce the height of 1st section (Faded yellow) using scrollTrigger . But the issue is second section(Blue section) is hiding behind the 1st section on scroll..
  5. Hey there folks! I just started exploring with GSAP in a new project and absolutely fell in love with the capabilities this library offers.It was going all good till i ran into a problem with the Scrolltrigger setup. So i am currently working on a nextjs single route project where the page is sectioned (components) in different parts and has navigation to scroll up and down on the page. I am using scrollTrigger to mark active nav based on which section is visible. There is one sections with two components (one Component for mobile view and the other for bigger screen) which is loaded based one screen size which is causing the problem, when initially the page loads it works fine but when resizing the window and mobile view component loads its scrollTrigger its Start position locks on top of the document even after refresh(). i tried my best to troubleshoot the problem in different ways. For other sections i used Scrolltrigger.matchMedia() to load different scrolltrigger position for different screen size and it works for other sections, this particular section is loaded conditionally and that's causing the glitch, and i'm not sure how to fix this. Demo Link: https://codesandbox.io/s/scrolltriger-navigation-to5kn?file=/src/App.js
  6. Hello, I would like some advice on my current issue, here is my requirements for my issue: the #section2 needs to be ScrollTriggered each animation from span/h2, each scramble needs to be finished on scroll, not stopping while there is scrambled text (sometimes you scroll a bit and it stops on some scrambled text) each span/h2 needs also to be ScrollTriggered, so each animation needs to be finished (forcibly?) before it trigger the following span/h2 on the following staggered element (1st span animate, stops. Scroll wheel, 2nd span animate. Quick scroll wheel, following animation quickly animates) It also needs to be pinned until the whole timeline is finished. Hope you guys can help me with this issue, thank you very much!
  7. Hello community , how we can apply scroll trigger for img from data base in foreach this is the images div from database <div><img src="{{$app->image_path}}" class="flower" alt="image" ></div> then this is the gsap part , but it fire the trigger for all image in the same time gsap.from(".flower", { rotateX: -80, ease: "expo.out", transformOrigin: "50% 100%", scrollTrigger: { trigger: '.flower', pin: true, start: 'top top', end: 'top center', scrub: 1, } });
  8. Hello everybody, I would like to make an action on each post of a blog when they enter the viewport. i did the following, but the event is fired on all elements with the .blog-item class, i would like to be fired only when each blog-item element enter the viewport, could it be possible to pass something like "this" in jQuery from the ScrollTrigger? Thanks all. let articles = gsap.utils.toArray($(".blog-item > *")); ScrollTrigger.create({ start: "bottom bottom", trigger: ".blog-item", onEnter: articleApparition }); function articleApparition() { let init= 1; articles.forEach(function(section){ let delais = init * 0.7; gsap.to(section, { opacity:1, duration:2, delay: delais, ease:"power1.out" }); init++ }); }
  9. I created this basic horizontal scroll website and my problem is when my Section Width is more than 100vw its not working properly, i want all section should be visible and scrollable. Thank you.
  10. Hello everyone! I express my deep gratitude to the community. There is a problem when objects disappear and appear while scrolling (banner-big children). How can I fix this?
  11. Every time I leave the page the position of the "Start and End trigger" refresh and change position according to Viewport I guess... Can this be changed so that it stays in the same position?
  12. ScrollTrigger not working within module using Chrome... though works as expected with npm on local server. I have read articles previously recommended by OSUblake about importing modules. Noting also the plugin is registered. Have also tried within the Body Script on a Wordpress page but same issue persists. Final production script needs to be within the Body Script on a Wordpress page. So, seems issue might be how the sketch variable is assigned to the object and then called within onUpdate in the timeline?
  13. if the Viewport is bigger, then the "animtion1" element won’t disappear from screen. Can I for example use a percent sign like this ( X: -100%) this is my code bellow gsap.registerPlugin(ScrollTrigger); gsap.to(".animation1", { x: -860, duration: 12, scrollTrigger: { pin: true, trigger: ".animation1", markers: { startColor: "blue", endColor: "purple", fontSize: "1rem", }, start: "100% center", end: "200% 30%", scrub: 2 } });
  14. I followed the solution by OSUblake on how to use imports as a CDN within <script type="module"> to import GSAP. I also added the required registration of gsap.registerPlugin(ScrollTrigger); but console error states that ScrollTrigger is undefined. I did not find any reference on skypack.dev on how to separately import ScrollTrigger plugin. Does the cdn import from skypack.dev for GSAP also include ScrollTrigger or does it need to be imported separately ?
  15. Hello community! I can't figure out how to replay tween after main ScrollTrigger. In the Codepen I have an example, on the first scroll end there is a beam, but if you scroll up again and try to get the same animation (after ScrollTrigger ends), it doesn't replay. I've tried to clear animation inside onComplete like onComplete: () => { circleTl.time(0).kill() } But no luck. How to solve that? Thanks!
  16. Hi, I am having some problems with scrollTrigger, I am trying to create a timeline wich is going to trigger when a section gets into the viewport and is going to animate some content wich is inside that section, such as headings and texts, the problem comes when I try to repeat my classes, all the sections are going to have the same class( I know for doing this I shoud use something like gsap.utils.toArray() and loop through the sections) but, what about the content inside the sections wich I want to animate? should I use different classes to each heading and text? or is there a better approach? I am going adjunt a codepen of what I tried to do. Thank you so much.
  17. Hey guys, I'm running into problems when i scroll down or up too quickly. It must be something quite simple, I'm missing. If you scroll down slow, then box 1 appears, and then as you go further down, box-2 appears. But if you scroll down quickly, past both triggers, box 1 doesn't disappear quick enough and all the boxes appear on top of each other. I'm using fromTo's and I've tried "immediate render: false" and "overwrite" but, have not been able to work out what is causing this issue. Hope that all made sense. I've made a minimal codepen demo to show what's going on. Any help is greatly appreciated. Cheers
  18. Hello, So i used the ScrollTrigger skew example to tilt the three js camera instead the image skew property. Apart from that, a text div is being translated and sphereGroup is being rotated using gsap value & it is working nicely The problems i face with velocity are: 1 ) there is no smoothing happening when going to the calculated position 2) the above problem also leads to jerk when scroll direction is switched it 3) with mouse wheel the the incremental jumps does not look nice (which could also be solved with better smoothing maybe?) any tips ? suggestions for better gsap to three logic also welcome last function in codpen has all the gsap properties
  19. Hello, I'm really excited to get the opportunity to work with gsap! I'm currently having an issue with reusing the same gsap function for multiple elements. My goal is, that each box-container gets triggered individually when they come into the viewport. Currently, the animation function is only applied to the first box-container, which is also the only one that has gotten a scrollTrigger marker applied to it. What I want however, is that each bock-container gets their own markers and is triggered individually. To me, my demo really makes sense but it's obviously not achieving what I need. I would really appreciate if someone could explain to me where I went wrong ^^ Thanks! Edit: I've changed the animations from when I first posted, but I added some comments to the codepen for later viewers that might experience the same problem to see the progression.
  20. Hi, I need some help with horizontal scrolling. I can't provide you with a CodePen example. My env.: Next.js GSAP (newest version at the moment) My <body> element contains a <Layout> element which is set like this: .layout { display: flex; flex-direction: row; width: 100vw; height: 100vh; overflow-y: auto; main { display: flex; flex-direction: column; flex-grow: 1; overflow-y: auto; overflow-x: hidden; } } Inside <main> I'm trying to implement something simmilar to the codepen https://codepen.io/GreenSock/pen/eYpOZvX My version looks like this: export const HorizontalScrollTiles: React.FC = () => { useEffect(() => { const container = document.querySelector('.abc'); const scroller = document.getElementById('main'); gsap.to(container, { x: () => `${-(container.scrollWidth - document.documentElement.clientWidth)}px`, ease: 'none', scrollTrigger: { scroller, trigger: container, invalidateOnRefresh: true, pin: true, scrub: 1, end: () => `+=${container.offsetWidth}`, }, }); }, []); return ( <div className="abc" style={{ minHeight: '100vh', display: 'flex', flexWrap: 'nowrap', width: '600%', }}> <Tile className="horizontal-scroll-tile" style={{ width: '100%', backgroundColor: '#ff22ff' }} /> <Tile className="horizontal-scroll-tile" style={{ width: '100%', backgroundColor: '#ffff2f' }} /> <Tile className="horizontal-scroll-tile" style={{ width: '100%', backgroundColor: '#f29fff' }} /> <Tile className="horizontal-scroll-tile" style={{ width: '100%', backgroundColor: '#ff8029' }} /> <Tile className="horizontal-scroll-tile" style={{ width: '100%', backgroundColor: '#ffff99' }} /> <Tile className="horizontal-scroll-tile" style={{ width: '100%', backgroundColor: '#11ffff' }} /> </div> ); }; Tile Element is just a <div> containing another <div> with a <h2> I'm going to explain the problem now: First of all, the code does something only if I set markers: true it's not perfect, but at least I can scroll almost to the end of the last <Tile> Without markers set to true, I can't scroll at all. Do you have any ideas/suggestions how to implement this functionality? It's really important. With markers set to true: and without:
  21. Hi everyone, I'm trying to make an horizontal scroll, that I understand. I'm not very good at math and logic but I want to make like when u scroll the scale of the section goes .5 then back to normal. I have seen plenty of exemple but i cannot figure what logic is behind. Sorry for my english.
  22. Good day, I want to create a text reveal animation as shown on the codepen as a scrolltrigger. To have the animation starts when the trigger reached the middle of the screen when scrolled. Can someone help me?
  23. The scrollTrigger is suppose to kick-off operation as soon as the element comes within the stipulated range but for some weird reasons, it just won't work. Also, the markers don't show up as expected. What I'm I missing?
  24. What I'm trying to do? I've got 2 images on top of each other I want to alpha-in (opacity) via the blend-mix-mode layer with ScrollTrigger. position: relative; height: 100vh; width: 100vw; overflow-y: scroll; } img { min-width: 100vw; max-width: 100vw; height: 200vh; position: absolute; object-fit: cover; &#imageOne{ overflow-y: scroll; } &#imageTwo { overflow-y: scroll; mix-blend-mode: multiply; } } I'm having trouble just getting the images to animate with a scroll bar. I'm using big images about 5000px in size becuase I want them to be in a container with a scroll bar that I can use as the 'Scroller' for the Opacity for the image with blend modes on. What I've come up with: So far not really much luck. Here is a running view of what I've got so far. https://react-pvbx1r.stackblitz.io/ I have the project here you can see the code at the bottom is the images and the styling is in BackgroundStyle. I feel I have got the right Idea with GSAP in using useEffect to set options after the DOM has been rendered and using useRef for referencing Nodes to give to GSAP. But I don't think my problem is with React. I just cant seem to get the scroll and the animation to work. Here is the Editor link https://stackblitz.com/edit/react-pvbx1r?file=src/components/landing.js Thanks P.S I'm learning a bunch of frameworks at the moemnt so there is a chance im using quite a lot of this stuff wrong, if you spot any bits that aren't written well I would be very gratefull if you highlighted them! All the best
  25. Hey guys! I reused an animation based on snorkltv to have a rotator attached with the ScrollTrigger, but I'm having some issues with the scroll. I can't find the bug, but my issue is that scroll is blocking (I can't reproduce the exact time or behavior), and the animation obviously stops working. I leave here a video and the Codepen to show them, as usual, thanks in advance for your help! 🙂 🙏 scrollvideo.mov