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. Hi! I would like to know if a fade in effect between sections is possible with GSAP & ScrollTrigger while a section has more content and needs to be scrollable at the same time. With the help of the ScrollTrigger demos I was able to achieve the fade in effect, but I don't know how to keep this fade effect between sections while also being able to scroll the section with more content (in this case, section 2). I would really appreciate any help or hints as to where / what I should be looking for.
  2. Hi all, Looking for a hand or some advice if possible. I've created this codepen (below) and it works well enough when you drag the content horizontally but I would also like to be able to scroll with the mouse through the content, very much like the functionality of this website - https://antoni.de/cases/ I'm fairly new to Javascript and certainly GSAP, so any input is much appreciated. Thanks Jon
  3. 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
  4. Hello all, I just had a problem with iOS 10 Safari and the ScrollToPlugin, there are some changed that now will trigger the autoKill function. It has taken me more than a hour to realize that it was the autoKill function who stopped the animation. (iOS9 Safari didnt had this problem) Just for people with the same problem (I think almost everybody who is using ScrollToPlugin) for now just add "autoKill:false": TweenLite.to(window, 1, {scrollTo: {y:2000, autoKill:false}, ease:Power2.easeInOut}); Sorry for no Codepen but you can easily try it out with the Safari Developers Debug, just open a page that is using GSAP on your iPhone en run code without autoKill:false. (Sometimes it will not autoKill it, but almost always). Hope that I have made someone happy with the same problem Greets! Vincent
  5. 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 creating slick effects and keeping your animation in view during the scroll. Insane levels of flexibility ScrollTrigger is a control freak's dream when it comes to choreographing animations, but its rich callback system also lets you accomplish things totally unrelated to animation. Directionally smart ScrollTrigger supports vertical and horizontal scrolling, and lets you check if the last scroll movement was forward or backward, and even tracks velocity! Automatic resizing ScrollTrigger elegantly adjusts to viewport size changes. You can even use function-based start/end values to run custom logic or tap into fancy responsive CSS changes. Maximum performance ScrollTrigger uses all kinds of techniques to maximize performance like throttling updates, pre-calculating intersection points to minimize effort during scroll, leveraging transforms, layerizing elements to utilize the GPU, etc. Integrated with GSAP ScrollTrigger is built on GSAP, the battle-tested standard for JavaScript animation that's used on over 10,000,000 sites worldwide including most award-winning ones. Get started with ScrollTrigger Download Documentation Examples Featured ScrollTrigger demos View all demos
  6. 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 help me, I will pray for your health from a faraway land. Thank you very much๐Ÿ˜‰ ๆตทๅค–ใฎ็š†ใ•ใ‚“ใ€ใ“ใ‚“ใซใกใฏใ€‚ๆ—ฅๆœฌใฏไปŠๅคœใฎ2ๆ™‚ใงใ™ใ€‚ ใƒชใƒขใƒผใƒˆใƒฏใƒผใ‚ฏใฎใŠใ‹ใ’ใงใ€ใ“ใฎๆ™‚้–“ใพใงไป•ไบ‹ใŒใงใใพใ™ใ€‚ ScrollTriggerใงใ‚ขใƒ‹ใƒกใƒผใ‚ทใƒงใƒณใ‚’ใ—ใŸใ„ใฎใงใ™ใŒใ€็งใฎไฝœใฃใŸใƒ‡ใƒขใงใฏใฉใ†ใ‚„ใ‚‰้›ฃใ—ใ„ใ‚ˆใ†ใงใ™ใ€‚ ใฉใ†ใ™ใ‚Œใฐใ„ใ„ใ‚“ใ ใ‚ใ†ใจ่€ƒใˆใฆใ€่กŒใ็€ใ„ใŸใฎใŒ"ScrollTrigger.proxy"ใ ใฃใŸใฎใงใ™ใŒใ€ๅ…ฌๅผใฎใƒ‰ใ‚ญใƒฅใƒกใƒณใƒˆใ‚’่ชญใ‚“ใงใ‚‚ใ‚ˆใใ‚ใ‹ใ‚Šใพใ›ใ‚“ใงใ—ใŸใ€‚ ใพใ‚็งใŒDeepL่ถŠใ—ใงใ—ใ‹่‹ฑ่ชžใ‚’่ชญใ‚ใชใ„ใฎใŒๅŽŸๅ› ใชใฎใงใ™ใŒใ€‚ใ€‚ใ€‚ใ€‚ ใ‚‚ใ—ๅฟƒๅ„ชใ—ใ„GsaperใŒใ„ใŸใ‚‰ใ€ใฉใ†ใ™ใ‚ŒใฐScrollTriggerใ‚’ใƒ‡ใƒขใงๅ‹•ไฝœใ•ใ›ใ‚‹ใ“ใจใŒใงใใ‚‹ใฎใ‹ๆ•™ใˆใฆใใ ใ•ใ„ใ€‚ ใ‚‚ใ—ใ”ๅ”ๅŠ›ใ„ใŸใ ใ‘ใ‚‹ใฎใงใ‚ใ‚Œใฐใ€้ ใ„ๅณถๅ›ฝใ‹ใ‚‰ใ‚ใชใŸใฎๅฅๅบทใ‚’ใŠ็ฅˆใ‚Šใ—ใพใ™๐Ÿ™
  7. 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 experience? (React-oriented solution would be highly appreciated, but VanillaJS-based solutions would also work) Thanks in advance
  8. 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?
  9. 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.
  10. 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 below, but is is just causing a blank space to be left on the bottom of the page Here is a link of how the animation should work https://drive.google.com/file/d/1EsKinyuID5buWKhQllRhE1Bmc6el5GTX/view and I left a codepen with the basic markup of my current pate. Any help would be appreciated.
  11. 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
  12. 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
  13. 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"> ... </div> </div> </body> </html> Here is my App single file component where the scrolling code is: <template> <router-view></router-view> </template> <script> import {gsap} from 'gsap'; import { ScrollTrigger } from "gsap/dist/ScrollTrigger"; import LocomotiveScroll from 'locomotive-scroll'; export default { name: 'App', computed: { tag() { return this.scroller.tagName; }, scroller() { return document.scrollingElement; } }, mounted() { this.scroller.setAttribute("data-scroll-speed", "0.5") this.scroller.setAttribute("data-scroll", "") const locoScroll = new LocomotiveScroll({ el: this.scroller, smooth: true }); gsap.registerPlugin(ScrollTrigger); locoScroll.on("scroll", ScrollTrigger.update); ScrollTrigger.scrollerProxy(this.tag, { scrollTop(value) { return arguments.length ? locoScroll.scrollTo(value, 0, 0) : locoScroll.scroll.instance.scroll.y }, getBoundingClientRect() { return { left: 0, top: 0, width: window.innerWidth, height: window.innerHeight } }, pinType: this.scroller.style.transform ? "transform" : "fixed" }); ScrollTrigger.addEventListener("refresh", () => locoScroll.update()); ScrollTrigger.refresh(); } } </script> <style scoped> </style> Note that the scrolling element is the html tag (document.documentElement). The scrolling speed hasn't changed. I'm also using a custom cursor which has size 64px by 64px and when I move it to the edges it makes the scrollbars appear (I can confirm this is because of GSAP + Locomotive scroll as everything is fine without it). The second issue that I cannot move the cursor past 100vh (you know, to scroll to the rest of the page) - I can scroll the page, just the cursor doesn't come with. Also, position: fixed elements also do not pass the 100vh point (again, works fine without GSAP) and hence they are lost when I scroll down. There's something I'm clearly missing about correctly structuring pages. I would like to keep the HTML element as my scrolling element due to the current structure of the app - is it a requirement that the scroll container cannot be the HTML/body elements? After wrapping the html in the codepen link in html and body tags and then adding the required attributes to the html tag manually, the scrolling still works as expected so I'm not sure what's going wrong. Any and all help is greatly appreciated.
  14. 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. Any help would be appreciated
  15. 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~
  16. 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, toggleActions: "restart none none none" } }); tlhomescroll .to(window, {duration: 1.5, ease: "power3.inOut", scrollTo: "#section2"}); using "o-herotall__bg" as a trigger on my 1st section it scrolls to section 2. I then do the same for section 2 to section 3. This all works fine, but the problem is: Once the user scolls down and reloads the page or comes back from another page to this on on a lower scroll position, the scrollTo is triggered and the window scrolls to section 3. How can I prevent the scroll event from triggering when the page isn't loaded at the top?
  17. 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 know that it's very helpfull for you to help me if i put everything on a code pen, but i can't upload the images. So I left all the code, and here I share the link of the web so you can see it. http://losderechosnoseaislan.com/home1.html If someone could help me, i would be pleased cause i'm in a hurry. Thanks in advance!!!!
  18. 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.
  19. 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
  20. 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 is appreciated. When I get something to work, I will post it to CodePen. Below is a list of some of the features I am trying to incorporate: Start at right of div, fade in letters and scroll from left to right. At left of div, letters fade out of display. First list item starts right after last list item without break in list. List repeats indefinately. Mouseover list causes the list scroll to pause. Seems simple enough but I have no clue how to tackle this. Thanks, James
  21. 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. It all works as it should, it doesn't really feel great and can be a little jerky to begin with... so my questions would be... Is my approach suitable for this ? Are there any quick wins I could make to improve it? Or should it be done another way eg. scrollTrigger ? (No idea how to do this atm) Any advice greatly appreciated. Many Thanks!
  22. 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 to the nech anchor point. After that scroll behaves nornally again. im using gsap3 scrolltrigger integrated via proxy with locomotive scroll. does anyone know if this is possible? thnaks a lot for any help:)
  23. 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 to tween the content of a div, make sure you've set the overflow:scroll on the div and then do this: //scroll to 250 pixels down from the top of the content in the div gsap.to(myDiv, {duration: 2, scrollTo: 250}); Learn more in the ScrollToPlugin documentation. To learn how to include the ScrollToPlugin into your project, see the GSAP install docs.
  24. 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!
  25. 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.
ร—