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 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:
  2. 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.
  3. I don't know if this is a bug or there's a lacking on my understanding how SCROLLTRIGGER pinning works. Cause apparently, I'm having this annoying issue of page width increment (to 100%) when pinning the section. So basically, the problem is the second I set the width to 100vw. So, whenever I reach the SCROLLTRIGGER start, and it pins, it just expands the whole section to the rest of the horizontal space of the window (there is somehow additional widths, even though I never set anything exceeding 100vh 🙄). Please, help me and every other people who are facing the same issue using this amazing library
  4. 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?
  5. 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?
  6. 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
  7. Hi everyone, first of all: Thanks so much for GSAP and all the help you guys are giving here in the forum! I'm blown away by all the possibilities although I just started using it. First time poster, I did my best to search for a similar problem but didn't find anything related, so here I am: As for my problem with ScrollTrigger: If I go to the page that uses ScrollTrigger directly (https://polymorph.media/work/) everything's working fine. But If I navigate between the pages (e.g. go to home and go back or come from a different page) the markers of the elements to be triggered are moved way down. I'm pretty sure the problem is related to the BarbaJS-like page transition the wordpress theme has implemented and that it doesn't calculate the position correctly. As for the transition there's not much I can change about it. So on the GSAP side: Is this something I can possibly fix with ScrollTrigger.refresh() or ScrollTrigger.update()? Sorry for not providing a codepen since this seems to be a theme related issue. One further question: Is it possible to use ScrollTrigger to auto-hide and show the navbar like Headroom.js (https://wicky.nillia.ms/headroom.js/) does? I'd love to replicate this in GSAP so that there's less to worry about since I'm having the same transition problem as with ScrollTrigger.. Edit: Still building the website so I don't mind activating the markers so it visualizes my problem.
  8. Hi guys I am new to Greensock and recently I have created a template website using both gsap and barba js. The full code can be found in https://github.com/kitsonchan/template_architecture and you can also view the website directly here https://kitsonchan.github.io/template_architecture/. So now the problem that I have been struggling with is the timeline that was using scrolltrigger. In both of my page Ihave a timeline called tlStage1 and tlStage2. The tlStage1 works completely fine at all conditions but I don't know why tlStage2 only works when you refresh the page. I am not sure if the issue is related to barba js lol so i decide to ask here. Thanks!
  9. I think I've properly setup ScrollTrigger with locomotive scroll using some examples seen in the forum, however I can't seem to get my animation to work properly. It triggers as soon as the page loads without me scrolling to the point I set my trigger. here is a codesandbox link. https://codesandbox.io/s/cocky-darkness-ncfh6?file=/src/components/SectionThree/SectionThree.tsx sorry I couldn't use codepen. don't know if that's fine? edit: relevant files: App.tsx, SectionThree.tsx, instantiateScroll.ts
  10. 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
  11. Whenever you scroll I am making a function to play the video. The video is playing rough, how can I play it smoothly? I think I should use "scrollerProxy", but I don't know how to apply it.
  12. Hi, I was trying to created some cool animations using ScrollTrigger, but it doesn't work. The animation plays once the page is loaded. This is my code: I would like to add that thanks to the activity of this forum I could integrate GSAP animations to a child theme on Wordpress.
  13. Hello, I have created this pen and this is working fine. I just want to start and end pinning with the slider. Please help me out with GSAP & ScrollTrigger Kind Regards.
  14. Hello, I have a block, when user scrolls it becomes pinned and elements inside of it start to move to top with scrub, it's kind of smooth scroll only for this block. So it's working good, but now I have an issue, because I can't understand how can I implement ScrollTrigger animation for elements that inside of this pinned block. I understand why it's not working right now because I move this elements with tween and the trigger position changed. Can you give me advice, please? Thanks in advance!
  15. Hello. Hope you're all good. I have a problem where I can't find a solution and I was wondering if I can get an idea. In the previous pen I have an horizontal scroller ( not the same in my current project but something really close to the pen ) followed by a carousel that scrolls one by one on each scroll. This was inspired by this pen: https://codepen.io/GreenSock/pen/rNOebyo. Now the problem: in my pen and the one from the demos the start and end of each box is based on the window innerHeight and I can't figure it out on how I can start it once the user hits the carousel. The main idea -> goes through the horizontal scroller, the centered carousel is pinned, scrolls for like 300vh ( 100 vh = 1 scroll ) and then goes to next section. This isn't the only idea I tried various way of getting the offset().top of the centered carousel to start from there but without any success. Isolated carousel just in case: https://codepen.io/visualbadger/pen/yLbNxYW Thanks in advance and wish you a splendid day. The pen with the carousel and the horizontal scroller:
  16. I created this simple horizontal scroll, and I want to set start and end point to each section so I can individually target them for animation. Right now I'm facing issue to set Start: and End: point to SectionC (or any section), I can target a section for animation but start and end point not matching targeted section width.
  17. Hello guys, I can't quite figure out what's wrong with my tween, and was wondering if anyone here could help me out. The scroll animation is working as indented, but the problem is with the buttons. I'm seeing a small jump after clicking on it, most noticeable by a white flash at the bottom. Thanks in advance, Lucas
  18. Hello Sir, I want to scroll images which is in gray section with pinned to "home-feature-section" once gray section(home-feat-list-contain) finishes animate to x position. Sorry for poor english..
  19. Hello community, I tried to pin a google map on scroll with generated markers on it. And when I load or update markers, I refresh the Scrolltrigger instance to calculate the new sizes from my updated list (content). Bt when I do a refresh or a resize window, my Google map is reset. I think it's when I make a refresh, the content inside the `pin-spacer` markup reloaded and Google map does reset. Any idea? Thank you
  20. Hello All! I'm trying to recreate this: https://codepen.io/GreenSock/pen/YzyqVNe . But where the left column moves up on scroll then pins, then the right column comes up pins next to it and then scrolls through its content before moving down the page. simliar to this beautiful page: https://oldspitalfieldsmarket.com/ Any advice or guidance would be appreciated!
  21. I've make a simple GSAP and ScrollTrigger animation for my website, but when I build it with Vite JS (which uses rollup to build) I get an error like this: [rollup-plugin-dynamic-import-variables] Unexpected token (4:4) file: [file] error during build: SyntaxError: Unexpected token (4:4) at Parser.pp$4.raise ([folders]/dev/node_modules/rollup/dist/shared/rollup.js:16685:13) at Parser.pp.unexpected ([folders]/dev/node_modules/rollup/dist/shared/rollup.js:14195:8) at Parser.pp$3.parseIdent ([folders]/dev/node_modules/rollup/dist/shared/rollup.js:16616:10) at Parser.pp$1.parseImportSpecifiers ([folders]/dev/node_modules/rollup/dist/shared/rollup.js:15240:28) at Parser.pp$1.parseImport ([folders]/dev/node_modules/rollup/dist/shared/rollup.js:15203:28) at Parser.pp$1.parseStatement ([folders]/dev/node_modules/rollup/dist/shared/rollup.js:14369:47) at Parser.pp$1.parseTopLevel ([folders]/dev/node_modules/rollup/dist/shared/rollup.js:14252:21) at Parser.parse ([folders]/dev/node_modules/rollup/dist/shared/rollup.js:14044:15) at Function.parse ([folders]/dev/node_modules/rollup/dist/shared/rollup.js:14075:35) at Graph.contextParse ([folders]/dev/node_modules/rollup/dist/shared/rollup.js:20013:38) Once removing some code to try and find the problem I get this error: [commonjs] Unexpected token (1741:16) in [folders]/dev/node_modules/gsap/gsap-core.js file: [folders]/dev/node_modules/gsap/gsap-core.js:1741:16 1739: 1740: this.totalTime(this.parent && !this.parent.smoothChildTiming ? this.rawTime() : this._tTime || this._pTime, this.progress() === 1 && (this._tTime -= _tinyNum) && Math.abs(this._zTime) !== _tinyNum); // edge case: animation.progress(1).pause().play() wouldn't render again because the playhead is already at the end, but the call to totalTime() below will add it back to its parent...and not remove it again (since removing only happens upon rendering at a new time). Offsetting the _tTime slightly is done simply to cause the final render in totalTime() that'll pop it off its timeline (if autoRemoveChildren is true, of course). Check to make sure _zTime isn't -_tinyNum to avoid an edge case where the playhead is pushed to the end but INSIDE a tween/callback, the timeline itself is paused thus halting rendering and leaving a few unrendered. When resuming, it wouldn't render those otherwise. 1741: } ^ 1742: } error during build: SyntaxError: Unexpected token (1741:16) in [folders]/dev/node_modules/gsap/gsap-core.js at Parser.pp$4.raise ([folders]/dev/node_modules/rollup/dist/shared/rollup.js:16685:13) at Parser.pp.unexpected ([folders]/dev/node_modules/rollup/dist/shared/rollup.js:14195:8) at Parser.pp.semicolon ([folders]/dev/node_modules/rollup/dist/shared/rollup.js:14172:64) at Parser.pp$1.parseExpressionStatement ([folders]/dev/node_modules/rollup/dist/shared/rollup.js:14651:8) at Parser.pp$1.parseStatement ([folders]/dev/node_modules/rollup/dist/shared/rollup.js:14386:24) at Parser.pp$1.parseBlock ([folders]/dev/node_modules/rollup/dist/shared/rollup.js:14667:21) at Parser.pp$1.parseStatement ([folders]/dev/node_modules/rollup/dist/shared/rollup.js:14351:34) at Parser.pp$1.parseIfStatement ([folders]/dev/node_modules/rollup/dist/shared/rollup.js:14497:49) at Parser.pp$1.parseStatement ([folders]/dev/node_modules/rollup/dist/shared/rollup.js:14340:31) at Parser.pp$1.parseBlock ([folders]/dev/node_modules/rollup/dist/shared/rollup.js:14667:21) Here is how I'm importing it (I've found out that when I import the UMD version of gsap it works but then I don't get IDE intellisense): import { gsap } from "gsap"; import { ScrollTrigger } from 'gsap/ScrollTrigger' gsap.registerPlugin(ScrollTrigger) And the GSAP and ScrollTrigger code: gsap.to(document.getElementById("title-wrapper"), { scrollTrigger: { trigger: ".title-wrapper", end: window.innerWidth * 100, scrub: true, start: "top top", }, x: window.innerWidth * 100, }); if (window.innerWidth > 1240) { gsap.to(document.querySelectorAll(".resson"), { scrollTrigger: { trigger: "header", start: "top 40%", scrub: true, }, y: -90, }); } I don't know why it doesn't work. Can you help? Thanks in advance!
  22. Hi everyone, I'm trying to create an image sequence that can be played backwards or forwards by scrolling the page up and down. But I also need the sequence to be controllable using a video style progress bar. Using some of the code that I've copied from these forums I've managed to get the image sequence working and I've also managed to create a play bar control with a playhead that can be dragged left and right. But I can't get the playhead to control the current image that is displayed in the image sequence. In the code for the image sequence I specify the number of frames, so I'm assuming I need to divide the length of the progress bar into an equivalent number of 'units' and then advance or rewind the image sequence every time the play head is dragged by one 'unit'.
  23. Hi everyone, I would like to achieve the following image parallax effect (vertical translation) with Scrolltrigger and without Smooth Scroll. https://tympanus.net/Tutorials/SmoothScrollAnimations/ I tried the parallax demos in the docs, but they work differently then this example. Which way is the best to get this effect? Thanks Martin
  24. Hi there, I'm running into weirdness with scrollTrigger and marker positioning. I have a page with 2 components built in Next.js, one is using scrollTrigger to pin an element for a duration (AnimationScrollBlock), and another component fades in some images when the user scrolls to it (ImagesBlock). When I click between navigation pages and then back to the "Case" page, sometimes the markers seem to be in the correct position, sometimes they aren't. The same thing appears to happen when I do a hard refresh on the page. Sometimes they are correct, other times they aren't. When they aren't in the correct position the animation for the fading images has already completed before I actually get to that section of the screen. Here is a url to see the issue in action: https://3qfnr.sse.codesandbox.io/case Try doing a hard refresh on the page and see if the marker position for images-1 and images-2 move around. Click to another page and then back to see if the markers move. Screenshot below as well showing what I see when the position is calculated incorrectly and correctly. And here is the codesandbox link to see the code: https://codesandbox.io/s/eager-banach-3qfnr (click on the Case Study link in the nav) As a test, when I move the AnimationScrollBlock component to be underneath the ImagesBlock component, things work as expected. I'm sure it's something dumb but I'm stumped, would really appreciate any insight you might have! Thank you!
  25. Hello GSAP friends! I am having trouble combining some ScrollTrigger and SplitText features in the correct way. I have several sections that use ScrollTrigger to pin when in view and have a timeline that animates their opacity in and out. (section.slide) Of these sections, those that also have the class 'slide-text' are using SplitText to split their H2 content for animation. (section.slide.slide-text h2.animatedcharacters) I'd like the text to also use SplitText's animation feature to animate the text via scrub when its parent section comes into view both onEnter and onEnterBack, with it resetting onLeave and onLeaveBack. I've looked at several demos and have pinned down the SplitText animation I'd like to use (see the comments at the end of my JS). Please see my attached CodePen. I have the pinned sections the way I'd like them, and I also have the text splitting, but I don't know how to integrate the SplitText animation into the existing scrollTrigger params and timeline. Apologies, but this is as far as I've gotten, I can't seem to combine the various demo content I've explored to get the code for my specific case. Many thanks!