Jump to content
GreenSock

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

Search the Community

Showing results for tags 'scroll'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Personal Website


Twitter


CodePen


Company Website


Location


Interests

  1. 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.
  2. Hello to everyone overseas. It's 2:00 in the middle of tonight in Japan. Thanks to remote work, I can work until this time. I would like to animate with ScrollTrigger, but apparently it is difficult with the demo I made. I wondered how I could do it, and what I ended up with was ScrollTrigger.proxy, but I read the documentation and didn't understand it. Well, the reason is that I can only read English through DeepL. .... If there are any kind-hearted Gsapers out there, please let me know how to get the ScrollTrigger working in the demo. If you can h
  3. Hello, I am quite new to GSAP and I heard a lot of good words regarding its capabilities. I am working on a website where I want to implement momentum-based scrolling as observed in the following websites: https://abhishekjha.me/ https://rekhchandsahu.com/ I spent a day learning basics of GSAP, read some posts on the forum, and did a few Google searches. I stumbled across a similar post, hinting the use of ScrollTrigger plugin. However, I was not able to exactly figure out how to achieve the same effect. Could someone guide me about creating such a scroll exp
  4. Hey everyone, I am doing my first steps with GSAP right now. I am using it with Kirby and try to trigger some scroll events. I startet with the simple gsap.to(".box", { scrollTrigger: ".box", // start the animation when ".box" enters the viewport (once) x: 500 }); Unfortunately, the animation is only triggered when I resize the browser window. How can I fix this? Any hint is appreciated?
  5. 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.
  6. Hey guys, I have an issue an I'm looking for help. I have a page that has a parallax effect in all of the sections of a page whenever the user scrolls. So there are this black text blocks that are separated but whenever you scroll one of the blocks moves up to be next to the one on top, the issue is that this is causing a blank space between sections of the page. I want to know if there is a way, whenever the black text block moves up, to make the sections below move up as well, basically follow that text block whenever it goes up. I try this by just using a yPercent on the sections
  7. Hi! I'm new here so bear with me ☺️ I want to create a animation where it feels like its kind of wavy (don't know how to describe it the best way) when scrolling down the page. I want to do it like on this website (the orange part). So I'm just wondering if anyone here has got a similar Codepen or something I could use to modify or maybe give me some tips & tricks how I should think? Appreciate all the help I can get 😊 Thank you in advance! /cheers from Sweden
  8. I want to animate the splitting of a product image when the user scrolls to the section. i.e. When a user scrolls down and enters the product image section, I want to trigger the animation of revealing the different layers/composition of the product. Like it is done here (scroll down to the second section after landing page): https://simbasleep.com/ Any suggestions?
  9. Hi guys! I'm trying to reproduce the smooth scroll on drag, this is an example. Do you guys have any idea how can I make it? https://www.designembraced.com
  10. Newbie here, I'm using Vue (3.0) and I'm trying to get started with GSAP and Locomotive Scroll but ran into a couple of issues. I've tried using some sample code(bottom of post - mine is without the code to scroll images) to get smooth scrolling implemented but I've found that it adversely affects the layout of my page. A page is a div element, styled by: .full-page { min-width: 100%; width: 100%; min-height: 100vh; } So the structure of the application is: <html> <body> <div id="#app"> <div class="full-page"> ...
  11. Hello, I have a question although I don't know if I can't find the answer here but I thought I should give it a try since I exhausted all other options. I have an image/video that needs to be pin and it's going to be move to another section, so what I need it's to be able to un-pin the image once the center of the image/video hits the center of the content of the section. The problem is that the image can be larger or smaller depending of the size of the screen (since it's inside a grid) so I don't know how to calculate this so the centers always meet regardless of the image size.
  12. GreenSock

    ScrollTrigger

    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
  13. Hey guys, I'd like to achieve an infinite horizontal animation that changes direction (and speed) depending on whether the user scrolls up or down. The animation currently changes with scroll, but eventually stops (see codepen). I know there are a few examples of infinite loops on the forum, however I wasn't able to combine them with a change in scroll direction. Any help on how to create an infinite loop with this example would be amazing Cheers~
  14. I'm using the ScollTo plugin to hijack the scrolling of the user: I've got multiple sections. Once the user scrolls a little bit the first scrollTo animation gets triggered and scroll the whole window to the second section. Once the user scrolls down more it automatically scrolls down to a third section. To achieve this I've use this code: let tlhomescroll = gsap.timeline({ scrollTrigger: { trigger: '.o-herotall__bg', start: "top top", end: "bottom center", autoKill: false, markers: true, pin: false, scrub: false, tog
  15. Hi! I was wondering if someone could help me, as I am about to lauch this site in which I have an animation for which I'm using ScrollTrigger with from() to a position absolute + scroll magic. The problem is that in some cases in desktop and always in mobile, the elements (images and divs) render before de animation starts. I mean, there are elements that should start with Opacity 0 but they first appear (so you already see thins of the animation before starting) and then, after some seconds they turn to be in the way they should for begining the animation. I kno
  16. How to achieve the effect of text appearing at the top of the container? The text comes out more and more as you scroll, it is fixed but only visible in the given container.
  17. 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
  18. I am trying to replace a jQuery plugin called "li-scroller" which combines the <li> tags from an unstructured list and scrolls the items inside a div one after another from left to right indefinately. Unfortunately the plugin distorts the letters slightly as the speed increases and I was hoping that Greensock would produce a more fluid result. Since I am new to Greensock, I am not sure which approach to take to accomplish this. Is Split Text necessary or would a method using Split Text produce smoother results than the alternative? Any guidance or examples to help get me started i
  19. Hi all. This is my first post on the forum! I was hoping for some advice with a scroll based interaction I am working on. Essentially I have a fullscreen panel, containing a video and an H1 positioned on top (in reality I think the H1 will be an SVG logo). I am looking to have the H1's position on the Yaxis adjusted as you scroll down the page, effectively going in the opposite direction to normal, and disappearing from view out the bottom of its parent container. I have built this out the best I can so far using a gsap timeline and scroll event on the window.
  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. GreenSock

    ScrollToPlugin

    Allows GSAP to animate the scroll position of the window (like doing window.scrollTo(x, y)) or a <div> DOM element (like doing myDiv.scrollTop = y; myDiv.scrollLeft = x;). To scroll the window to a particular position, use window as the target of the tween like this: //scroll to 400 pixels down from the top gsap.to(window, {duration: 2, scrollTo: 400}); //or to scroll to the element with the ID "#someID": gsap.to(window, {duration: 2, scrollTo:"#someID"}); //or to specify which axis (x or y), use the object syntax: gsap.to(window, {duration: 2, scrollTo: {y: 400, x: 250}}); Or
  22. GreenSock

    Draggable

    #container { margin:0; padding:0; font-family: Signika Negative, Asap, sans-serif; font-weight: 300; font-size: 17px; line-height: 150%; } #container h1 { font-family: Signika Negative, Asap, sans-serif; font-weight: 300; font-size: 48px; margin: 10px 0 0 0; padding: 0; line-height: 115%; text-shadow: 1px 1px 0 white; } #container h2 { font-family: Signika Negative, Asap, sans-serif; font-weight: normal; font-size:30px; color: #111; margin: 18px 0 0 0; padding: 0; line-height:115%; } #container p { line-height: 150%; color
  23. Hi, I'm looking for help regarding scroll trigger and items positioned fixed within a pinned section. I'm having an issue where I have a modal that needs to stay in window view once it's open, but it looks like it's being positioned relative to its pinned parent and I'm able to continue scrolling as normal. Hoping someone would be able to help me out!
  24. I am trying to achieve something like initially on page load there will be a header on user user scrolls down the initial header should hide and a new header should slide down. i have done this using animate css and plain js. but this works smoothly only when the user scroll is smooth. when the user scrolls the page very fast the header slidedown faces some glitchs so i want to use scrolltrigger to achieve this. may i know how to achieve this.
  25. I'm trying to add a little parallax effect to the articles I add into my project from contentful. Even after using `this.nextTick`, it seems like the articles are loading in after the timeline initializes. Can someone help me with getting the dynamic elements to load before the timeline? I don't want to move my gsap to the updated() lifecycle hook, since that seems unnecessarily heavy.
×