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. <template lang="pug"> .container(ref='container') .container__wrap .hoge .hoge__item(style='background:red') .hoge__item(style='background:green') .hoge__item(style='background:blue') </template> <script> import Scrollbar from 'smooth-scrollbar' import gsap from "gsap" // eslint-disable-line import { ScrollTrigger } from "gsap/dist/ScrollTrigger.min.js" // eslint-disable-line class HorizontalScrollPlugin extends Scrollbar.ScrollbarPlugin {// eslint-disable-line static pluginName = 'horizontalScroll' transformDelta(delta, fromEvent) {
  2. So, the Codepen demo DOES NOT replicate my issue -- which is sooooo frustrating. The Codepen demo works flawlessly. Hopefully screenshots can help. When you open the page, the start position is totally off. When you resize the browser oh so slightly, the start position is where it should and ScrollTrigger works like magic. It's super weird and I cannot figure out why. I've tried other triggers, endTriggers, etc. Nothing. Other pages look good. The only thing I can think of is I have a lot of show/hide functionality with those "view floor
  3. Hi GSAP Team, I am new to the Scroll Trigger plugin and I am facing an issue with the same. I am having a website wherein I have triggered all the animations using Scroll Trigger and I have also used the rick callbacks now the issue that I am facing is If you are within a particular section and if you try refreshing the page then the scroll trigger animations are not re-initialising. For Example, if you are inside a section with the class name 'ABC' and then if you refresh the page the animations are not happening also the pinned element goes up somewhere hence the scrollbar is not reca
  4. Hi guys! I tried to draw an svg path on scroll with these three plugins: ScrollTrigger, DrawSVGPlugin, MotionPathPlugin. I did it but I really can't understand why it is drawing in reverse order. When you scroll down more than 30-35%, you will see a red ball drawing a line, but it should start from the top not from the bottom. I don't know if the problem is with line, css or any other thing. Can someone please help me with this. I really don't know how to fix it. @GreenSock
  5. Hi GSAP fellows, I'm trying to rewrite the animation below, so that it can leverage scrollTrigger. https://codepen.io/eric-chuang/pen/wvWvNGd However, how I code right now can't use the trigger '.title-bg' to select multiple elements. Instead, it plays the animation on 'chars' three times. const tl = gsap.timeline({ scrollTrigger: { trigger: ".title-bg", start: "top center", toggleActions: "play pause replay pause", markers: true, } }), splitText = new SplitText(".title-bg", { type: "chars" }), chars = spl
  6. Hi all, I was wondering if someone might be able to offer some help with a scrollTrigger setup I am looking to put together... I would like to be able to know when one of the image blocks on the left comes inline with the pinned element on the right, so that I could do a visual effect on the lined up block, and then remove it and apply to the next block to lineup with the text. Im not entirely sure how to go about his at the moment, my inital thought was to create a whole other scrolltrigger for each block but I doubt that is the way to do this... any
  7. If I want to toggle a class on another object, the class "undefined" is set instead of the one I want. Here the example: https://codepen.io/alsodenn/pen/WNrNNap
  8. Hi all, Thanks for the great work on the ScrollTrigger plugin. Its a joy to use! I was wondering if its possible to have a custom offset for the pin functionality? I am animating a video based on the ScrollTrigger progress. Additionally, I want the video element to be pinned at the top. This works just great using pin: true Now I ran into a small issue: I want to start the animation when the element comes into view, but only have it pinned once it reaches the top of the viewport. Setting the start position to start: "top 50%" makes the animation play when the trigger i
  9. Hi, i have the following issue: I am making a Website using Vuejs and would like to use the ScrollTrigger in a sub-page. On this sub-page images should be revealed on scroll using the ScrollTrigger and toArray. However for some reason the starting point "top bottom" is only set properly for the first image at the first visit of the site. On all following images the start trigger is kind of the same as the first one, which shouldn't be the case. If i reload the page or visit it for the second time, everything works properly and the start and end triggers are at the right place. I do
  10. Wussup, GSAP! I`m experiencing some issues with snapping. My snap performs very laggy fo no reson. Here is my ST code: Here is an example of this snap performing at chrome mobile- And this is how it performs on my desktop (Yet another Russian local browser (chromium)). I have the same experience on different browsers including Chrome itself.- I`d like to say that my code is buggy, but all actual codeOpen demo examples of ScrollTrigger`s snap (from docs) are laggy on my desktop too. I briefly looked for latest snap related topics and
  11. How do I create a similar snapping effect like Fullpage.js? Is it possible with the snapping property in ScrollTrigger? From what I've tried, it seems snapping is always initiated when the element has passed halfway the viewport. I would like a far quicker response, when only a few pixels have been scrolled. This is the snapping-effect I would like to create with ScrollTrigger: https://alvarotrigo.com/fullPage/extensions/parallax.html I've added a codepen to show what I've tried so far.
  12. Hello! I think I probably set this up wrong, but I've been stuck on it for a few days now. I'm hoping to pin the image once it reaches the top of the view port and then pin and animate the text and bar once they reach the center. I want the timeline to finish animating before the text and bar start moving again, which is where I'm getting stuck. I tried pinning the image in a different scrolltrigger but then I had to wait until the pin was complete before the timeline would play. Any help would be greatly appreciated. Thanks! Ni
  13. Hello, I'm new to GSAP and very happy with it so far. I have an interesting problem and I can't find any codepens or topics containing useful info. Actually I am not sure if this is even possible. What I'm trying to do: Elements are fading in inside a section, when you scroll to it. When you scroll past it the elements fade out again and when you go back up they fade in again. I'm using stagger to animate the elements inside the section. Is it possible on scroll up to reverse the stagger effect, I would like the elements to fade in from the last one to the first, but only when scrolling
  14. Hi all, Loving the vibe here😊 This is my first post in the forum ever. I'm trying to implement a scroll based Lottie animation with GSAP 3 and the ScrollTrigger plugin. I've found a solution with GSAP 2 and ScrollMagic but things changed in the newest Version. Does anyone has a working example? Thanks for your support. Cheers, Nattha
  15. so in my codepen i have 3 sections i want to animate the 3rd section in such way that if section 2 fade out at that time section three will fade in and all the transitions will run on scroll but pin will not move. i am new here please help me.
  16. Hi, so I have created multiple backgrounds which I would like to squeeze and expand as shown in my codepen example. However, trigger position gets messed up everytime I resize the window, the <img> will be gone and the start position is shifted. 1) How do I keep everything as it is even on window resize? 2) And also because I will be making quite a few of these backgrounds and repeating the squeeze and expand for each of them as shown in my Codepen, I'm wondering if there is a more effective way to do it rather than having one timeline for each background? I've noticed some
  17. Dear GSAP Pros, I ran into an issue, where a ScrollTrigger should trigger the start of a timeline which was declared before. The Problem: The animation timeline is a bit complex (but simplified in the CodePen example) and should affect multiple elements in multiple sections. I created a loop, so that each of the elements would get triggered at it’s correspondending scroll position. But all instances are still triggered at the same time. I guess the problem is the timeline, which was declared outside of it. On the other hand I can’t get it inside the loop. I wou
  18. Hi!. First of all. Sorry for my english. ScrollTrigger works correctly but when I resize the screen the values of the style attribute are lost and the element that I am animating returns to its initial position ScrollTrigger.saveStyles(data) ScrollTrigger.matchMedia({ // Desktop '(min-width: 900px)': function () { let tl = gsap.timeline({ scrollTrigger: { trigger: imageOverlayBorder, start: '10% 20%', end: 'bottom 75%', toggleClass: { targets: [data, imageOverlay], className: "active" }, toggleActi
  19. Hello, so I created a new topic regarding my problem. Basically I have a structure similar to demo in codepen: https://codepen.io/luk-z-horec/pen/RwrYmvR What I need is to animate elements inside every section when they appear in the viewport. Now they animate all in the same time. Next question: it is possible in onEnter callback also have an element which trigger onEnter callback? Thank you for your help.
  20. Hi, i’m trying to achieve this behaviour and im googling without any luck for the past few days. Seems easy in theory so im just wondering if it is possible with gsap / scrolltrigger. -while .div1 is in viewport first mouse scrolldown will scroll to the next anchor point (.div2) basically my first two sections on website im working on are full height and width, i have button there that scrolls to the next section and im trying to bind this scroll tu function to mouse wheel as well so you cant stop scrollimg between tho sections and first scroll takes you straight t
  21. Hello, I'm trying to refresh my button animation without having to put it after the main animation (it's my paradigm). As you can see the start marker is situated where the button was before the pin spacer of the main animation was added. Thanks for your help
  22. Hello! I hope you guys are doing good. I have a question about Horizontal scrolling in react. I have attached my code pen to illustrate my issue. I created a ref for the timeline and then an array of refs to attached to the panels to emulate the document.querySelector(".portfolio") variable as seen in this CodePen and since i cannot set overflow-x: hidden to my body, I made a page wrapper that does that. However, the horizontal scrolling does not work but other animated element like the image fading in and the parallax effect of the title works. What am I doing wrong and what can i do?
  23. GreenSock


    Scroll-driven animations re-invented Animate anything on scroll DOM, CSS, SVG, WebGL, Canvas, whatever. Toggle playback state or scrub through animations Entering or leaving a ScrollTrigger area can make an animation play, pause, resume, reverse, restart, or complete...or you can make the scrollbar can act like a scrubber! Pin elements in place Make an element appear immune to scroll changes while the ScrollTrigger is active. This is surprisingly useful for
  24. Hi, I'm having a problem with scrollTrigger. I have two sections that I want to do a horizontal scroll. I've got both individually working great. But when I mix the two in together on the same page. There are issues. Notably on Safari you can see after one horizontal section is done, it's taken over by the next horizontal scroll even though the second horizontal scroll area is not the next section on the page. Can you anyone point me in the right direction to fix this?
  25. Hello, I'm having a issue with ScrollTrigger on a WordPress installation. This is my enqueue script in functions.php function my_gsap_script() { wp_enqueue_script( 'gsap-js', get_template_directory_uri() . '/js/gsap.min.js', array(), false, true ); wp_enqueue_script( 'scroll', get_template_directory_uri() . '/js/ScrollTrigger.min.js', array(), false, true ); wp_enqueue_script( 'script_home', get_template_directory_uri() . '/js/my_gsap.js', array(), false, true ); } add_action( 'wp_enqueue_scripts', 'my_gsap_script' ); Here's the code of my_gsap.js: // wait un