Jump to content

Search the Community

Showing results for tags 'scrub'.

  • 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. Please refer to the codepen and then third slide/section in the horizontal scroller. I have placed the comments "attempting to move c3 from top left to top right, then top right to bottom right" in both the JS and HTML so you know the area to focus on. Q). How would you move an object from: top left, to: top right, then from: top right, to: bottom right. What I am trying to understand and learn is how to chain animations (if that is the right term) and sequence (time them) one after the other, all while scrub is enabled. Thank you. 😃
  2. Hi Guys. I am new to GSAP, GSAP3 and scrollTrigger. I have been trying to implement some of the basics to learn how to use GSAP and ScrollTrigger. Please refer to the codePen. I am trying to make the letters (YEAH) in the first horizontal sliding section move up then down then up then down through the "scrubbed" animation. In other words, how do I make them go up and down multiple times instead of just the once. I have looked for examples and have been unable to find anything doing this. Can it be done?
  3. Hello, I'm trying to animate a slideshow using ScrollTrigger & scrub. I have snap set up and it works ok, but if you scroll with too much momentum you'll blow right past a slide/snap point. Is there a way too make the snaps mandatory? I don't think I can use CSS as the slides are absolutely positioned on top of one another. Also with less momentum the snap animation seems to take a very long time to start. I would like the snap to happen at roughly the same speed regardless of momentum, is that possible? Apologies if this has been covered somewhere else, I did my best to read the docs and search the forum.
  4. I try to do when I scroll down, the top section which name is "container" will be pin and I saw it' pinned but scrub not working, and another the image will be go one by one layout
  5. I want to start by apologizing for the JS. I am learning how to use MVC organization and was testing it out with this project. I know it isn't great but I'm learning 😅. So... my problem here is that while I have my animations working perfectly on first load... I can't figure out how to reset the timeline and scrolltrigger when the window is resized. I understand that certain aspects will automatically recalculate but I need to recalculate certain element positions on the page. I might be going about this completely wrong as I have many examples of similar types of animations that don't have nearly the JS I have. One tricky caveat to my problem is that this is being built is Hubspot using repeaters for the sections, so I can't hard code the 'tl-line' element. I have to dynamically generate the top position and height of that line based on the center of the first and last bullets. In this example there are only 4 sections, but there could be 2 or 10... who knows. Anyway, I am explaining that to help you understand why it looks like a convoluted way to build the trigger elements positioning. Any help is much appreciated. Thanks!
  6. Can someone help me figure out why this is happening <template> <div class="wrapper"> <div class="full-page" /> <div class="main-content"> <p class="heading"> <span>Lorem ipsum </span> <span class="purple-text">Lorem ipsum</span> </p> <div class="ss-life"> <img class="imgs img-gs" src="@/assets/img-gs.png" alt="Image 1"> <img class="imgs img-sso" src="@/assets/img-sso.png" alt="Image 2"> <img class="imgs img-dt" src="@/assets/img-dt.png" alt="Image 3"> <img class="imgs img-fb" src="@/assets/img-fb.png" alt="Image 4"> <img class="imgs img-pool" src="@/assets/img-pool.png" alt="Image 5"> <img class="imgs img-tb" src="@/assets/img-tb.png" alt="Image 6"> <p class="heading-cont"> <span>Lorem ipsum </span> <span class="purple-text">Lorem ipsum</span> </p> <div class="text-box-one"> <p class="title"> <span>Lorem ipsum </span> <span class="blue-text">Lorem ipsum</span> </p> <p class="description"> Lorem ipsum Lorem ipsum, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div> <div class="text-box-two"> <p class="title"> <span class="orange-text">Lorem ipsum </span> <span>Lorem ipsum</span> </p> <p class="description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div> <div class="text-box-three"> <p class="title"> <span>Lorem ipsum </span> <span class="blue-text">Lorem ipsum</span> </p> <p class="description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div> <div class="text-box-four"> <p class="title"> <span class="orange-text">Lorem ipsum </span> <span>Lorem ipsum </span> </p> <p class="description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div> <div class="text-box-five"> <p class="title"> <span>Lorem ipsum </span> <span class="blue-text">Lorem ipsum </span> <span>Lorem ipsum</span> </p> <p class="description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div> <div class="text-box-six"> <p class="title"> <span class="orange-text">Lorem ipsum </span> <span>Lorem ipsum</span> </p> <p class="description"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div> </div> </div> <div class="full-page full-page-two" /> </div> </template> <script> import { gsap } from 'gsap' import { ScrollTrigger } from '@/node_modules/gsap/ScrollTrigger' export default { data: () => ({ anim: null, ssupLifeImgsMoveDistances: [ { x: -81, y: -21 }, { x: -44, y: -282 }, { x: 40, y: -102 }, { x: 20, y: 238 }, { x: -119, y: 108 }, { x: 100, y: 8 } ] }), mounted () { gsap.registerPlugin(ScrollTrigger) this.initAnim() }, methods: { initAnim () { this.anim = gsap.timeline({ scrollTrigger: { trigger: '.main-content', markers: true, pin: true, start: 'top top', end: '500% 50%', scrub: 1 }, ease: 'power3.inOut' }) this.anim.add(this.headingFadeout(), '+=0.5') this.anim.add(this.imageMove(), '+=0.5') this.anim.add(this.headingContFade(), '+=0.5') this.anim.add(this.textFade('one'), '+=0.5') this.anim.add(this.textFade('two'), '+=0.5') this.anim.add(this.textFade('three'), '+=0.5') this.anim.add(this.textFade('four'), '+=0.5') this.anim.add(this.textFade('five'), '+=0.5') this.anim.add(this.textFade('six'), '+=0.5') this.anim.play() }, headingFadeout () { return gsap.to('.heading', { opacity: 0 }) }, imageMove () { return gsap.to('.imgs', { x: index => this.ssupLifeImgsMoveDistances[index].x, y: index => this.ssupLifeImgsMoveDistances[index].y }) }, headingContFade () { return gsap.timeline().to('.heading-cont', { opacity: 1 }).to('.heading-cont', { opacity: 0 }) }, textFade (indexStr) { return gsap.timeline().to(`.text-box-${indexStr}`, { opacity: 1 }).to(`.text-box-${indexStr}`, { opacity: indexStr === 'six' ? 1 : 0, delay: 1 }) } } } </script> <style lang="scss" scoped> .wrapper { display: flex; flex-direction: column; overflow-y: scroll; } .full-page { height: 100vh; width: 100vw; background-color: rgb(252, 96, 96); } .full-page-two { height: 800vh; background-color: rgb(0, 149, 162); } .main-content { height: 100vh; width: 100vw; background-color: #1F1826; padding-top: 48px; overflow-x: hidden; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; .heading, .heading-cont { width: 237px; margin: 0 auto; font-family: 'Neue Montreal'; font-size: 40px; font-weight: 700; line-height: 38px; letter-spacing: -0.02em; text-align: center; font-feature-settings: 'salt' on; color: #FFFFFF; .purple-text { color: #7F3CDD; } } .ss-life { position: relative; margin-top: 80px; .heading-cont { position: absolute; top: 161px; // left: -87px; transform: translateX(-50%); width: 144px; opacity: 0; } .text-box-one, .text-box-two, .text-box-three, .text-box-four, .text-box-five, .text-box-six { opacity: 0; position: absolute; top: 126px; left: 0; transform: translateX(-50%); width: 216px; .title { font-family: 'Neue Montreal'; font-size: 24px; font-weight: 500; line-height: 29px; letter-spacing: 0em; text-align: center; font-feature-settings: 'salt' on; color: #FFFFFF; margin-bottom: 8px; .blue-text { color: #35FFFF; } .orange-text { color: #FF9421; } } .description { font-family: 'Neue Montreal'; font-size: 14px; font-weight: 500; line-height: 20px; letter-spacing: 0.02em; text-align: center; color: #939094; font-feature-settings: 'salt' on; } } img { position: absolute; } .img-gs { width: 108px; top: 81px; left: -195px; } .img-sso { width: 148px; left: -87px; top: 0px; } .img-dt { width: 116px; left: 61px; top: 40px; } .img-fb { width: 260px; left: -87px; top: 236px; } .img-pool { width: 148px; left: -159px; top: 184px; } .img-tb { width: 236px; left: 29px; top: 128px; } } } </style>
  7. I'm animating the camera in a Three.js scene. I'm able to animate the camera position using a timeline, but I also want to animate a vector3 called cameraTarget to control where the camira is looking. However if I log cameraTarget's values it shows that they actually update but in my scene the camera keeps the same cameraTarget view from the beginning, so basically it's not animating the cameraTarget position. This is my camera and cameraTarget setup This is my timeline And here you can see if I log the cameraTarget values they change as they should, but I don't see the movement in my scene.
  8. I feel like I may be overthinking this... 😬 I have multiple sections on a page, each with their own timeline, all of which are attached to the scrollbar via ScrollTrigger. The trigger for each section is the ID of the section's container, and the timelines start at the top of each container. I'm trying to set up a fixed navigation with anchor links for the user to navigate between these sections. The problem I'm running into is that when you click on a nav link, it scrolls the user to top of the container, which is the start of the timeline. Since the timeline is attached to the scroll bar, the user will then have to scroll to play out the rest of the timeline (which I feel is not always intuitive enough). Is there a way to link to the end of the timeline of a section? I tried putting a hidden element at the end of each section for the anchor link to link to... but that doesn't always play out the whole animation. I also thought about making separate timelines (but I feel like that's too much work for something that probably has an easier solution). Am I missing something?
  9. This is a simplified demo of my problem. I want to slow down the scroll, because I find that the animations run too quick. But each section has to keep its height of 100vh. I know that the duration of a scrubbed animations is equal to the distance between the start and the end point (here 100vh - 90px). So how can I fix that the scroll slows down?
  10. I'm working on something that look similar to this codepen [locomotiveScroll + ScrollTrigger]. All scrub and pin work perfectly on orange section until I add "once:true" this will leave white space 100% viewport as we setup in end parameter and push orange section under pin's whitespace. I believe that this is how scrub and pin spacing work. What I really want to do here is to improve UX in my app by stop scrub animation when it onComplete or play animation once just like how I add "once:true" but want to acheive this without pin's whitespace. I'm not sure about the pinType either since I use locomotiveScroll with scrollTrigger, this force me to use pinType as transform instead of fixed. I have tested it without locomotiveScroll but whitespace still remain so I believe it's not the caused of whitespace. Any suggestion on this? Thanks in advance
  11. I need the following behavior: a container with a height of two screens and an inner container with a height of one screen, when scrolling, the inner container is fixed on top of the screen. I wanted to do this using top: 100vh and scrub, but the behavior is different from what was expected. At 30% of progress, top is 51.222vh, at 60% - 84vh, in other words, it is not equal to progress.
  12. Hello everyone! I started using scrolltrigger to make a nice scrolling website for a client. In the header section, I want the animation tu run on scrub but not on backwards scrub, so I killed it onLeave. The problem is that when the animation is killed a large black space is left above my header section. I tried making it the same as I have it on CodePen but I failed.. hope it's understandable this way. Thank you in advance!
  13. Hello, i'm trying to make a hash link to work with ScrollTrigger and the pin functionality with no success... When the trigger is reached, an element containing the whole page is pinned, to stop everything during the animation. It seems that the link is pointing to the original location of the element (before ScrollTrigger resize the pinned element). I tried to locate the position of the element in the dom with element.getBoundingClientRect() to perform a scroll with window.scrollTo() but same issue, it returns the original location. How can I scroll to an element that is contained inside a pinned element? Maybe I'm pinning the wrong element?
  14. My goal is to create an effect where I reveal a section with horisontal scrolling sections. Though the horisontal scroll should not activate before the last cover has been scrolled away first. I have create a screen recording of the desired result here: The problem I am facing is that the horisontal scroll behaviour is initialised before it is visible, so one can never get to see the first slide.
  15. Hi! I am using ScrollTrigger in React and I am experiencing the following problem: When I update any React State and I use scrub:1(or any number), the animation is reset and it is possible to see it jumping. This doesn't happen when scrubis set to true I've tried different methods available in the guides and read many forum topics but I haven't had success. I wonder if this is possible keep the position when there is a re-render? I'd appreciate any help Thanks in advance
  16. Hello, the structure i want to make is actually auto height at the top and layers from the bottom, and then the last part is independent of the layer. For this I am sharing the image
  17. Hi, in the codepen example i shared i actually want to do the following. When the image is zoomed, the image goes to the next image and in the same way, it gets visual zoom and its text comes in. Can you help me with this?
  18. Hi GSAP champs, I've been working on an animation in which I draw three SVGs located in one section. I'm drawing the svgs with scroll-trigger in same timeline and also pinning that section with pinSpacing: true and the once: true is working fine as expected that it kills the timeline on completion. but the issue is the space that is being added by pinSpacing: true is not removing it self when animation reaches the end. Please help to achieve this. codePen demo is attached already. Thanks in Advance
  19. Hello, I want the images on sections TWO and THREE to be revealed by changing the flex-grow on .scrubScroll__dark to 0. So it would be: Scroll to section TWO Pin section, as user scrolls down reveal image (.scrubScroll__dark flex-box to 0) Keep scrolling and section THREE appears on top of section TWO I want the same funcionality for section THREE. I tried using onEnter and onEnterBack to call the function to change the flex-grow value, but is seems to run on page load, not on entering the section. I also tried using timeline, but couldn't get that working either. I'm new to gsap in general. Any help would be very much appreciated 🙂
  20. I have a scrub animation, navigated by a Tags (scroll down arrow). When I navigate with the scroll down arrow, the scrolling switches to the rubber band scrolling. This weirdly only happens on mobile safari and isn’t reproducible on codepen… Here’s a link to the page: Sample Page Thank you for any hints or comments! IMG_1229.MOV
  21. I already posted a similar problem, but I later realised that the solution I received was not wo sufficient: I have two scroll animations after each other. The Pin-Spacer of the first animation overlays the a tags at a certain scroll position and so there unclickable because they're overlayed by the pin-spacer. Is there any way I can make the a tags clickable? Mabe make the pin-spacer layer not blocking or something else. (if I enable pin Spacing the a tag gets clickable but then there's a huge white space between the two animations.) Thank you for your answers!
  22. I hava two scroll animations after each other. The a tag of the first animation is unclickable because it is overlayed by the pin-spacer of the second animation. Is there any way I can make the a tag clickable?. (if I enable pin Spacing the a tag gets clickable but then there's a huge white space between the two animations. Any help or comment highly appreciated!
  23. After a few days of struggling with this I finally decided to post on here for help... I'm trying to create a fullscreen section on my webpage that has a background image that upon being scrolled into view gets an opacity layer over it and after that opacity layer appears the image should become 50% of width (animate from left to right) and from the left side there should slide in a white "box" with text... the opacity, and the white half with text should happen after the image reaches top of webpage and then these animations should happen one after another... My problem is that I don't know how to make these animations apear one after another and the white half with text jumps in relay fast.. it should move depending on user scroll (I tried using the scrub feature of GSAP but I didn't know how to use it corectly to achieve what I want...) P.S this is my first time using GSAP so feel free to correct and point out all the mistakes I made Here is a link to a video of the animation made in XD how it is suposed to look like... https://imgur.com/a/xJHKCdS
  24. 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..
  25. Hi GreenSock, thank you for your amazing plugin for developer I have two problem when using scrub and pin, here is my demo https://codesandbox.io/s/infallible-framework-lqd4c?file=/src/App.js:1376-1396 The demo should demonstrate on 'open the new window' case 1. When enter the demo and instant scroll to second Section, there are some flash on second section when enter secoind section everytime, what's the reason cause the flash? 2.When you modify src/App.js and 'TwoSection.js' - StyledContentContainer ->height: 100vh to auto; and run again, how can i pin the second section align to first section? Any advice can help me? thanks a lot.