Jump to content
GreenSock

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. 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?
  2. 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.
  3. 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
  4. 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.
  5. 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
  6. 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.
  7. 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
  8. 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~
  9. 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!!!!
  10. 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?
  11. 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.
  12. 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!
  13. 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:)
  14. 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.
  15. 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
  16. 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!
  17. 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.
  18. 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.
  19. I’m trying to reproduce an effect i saw on this website : https://stuart.com/delivery-express-courier/ Just after the section with this title : Eco-friendly courier service, go green with us You can see the result on the temp website: https://swoopin.webflow.io/ There is 3 sections, and on the scroll, the image on the left stay fixed then fade to each other, while the text on the right continue to scroll normally I started workin on it, i got essential but it's buggy How could i fix that ? <script> gsap.to('#IMAGE-ELEMENT', { scrollTrigger: { trigger: '#IMAGE-ELEMENT', start: 'top top', pinReparent: true, pin: '#IMAGE-ELEMENT', endTrigger: '#LAST-SCROLLABLE-CONTENT', end: 'top top', } }); gsap.to('#CONTENT-ELEMENT-2', { scrollTrigger: { trigger: '#CONTENT-ELEMENT-2', start: 'top center', onEnter: () => { var imageUrl = 'https://uploads-ssl.webflow.com/5f369e90e946a4c5add5fc1a/5f3d850c8947f9d2f61724d0_shutterstock_447317020.png'; $('#IMAGE-ELEMENT') .fadeOut(10) .delay(10) .queue(function (next) { $(this).css("background-image", "url(" + imageUrl + ")"); next(); }) .fadeIn(); console.log(1); }, onEnterBack: () => { var imageUrl = 'https://uploads-ssl.webflow.com/5f369e90e946a4c5add5fc1a/5f3d850c8947f9d2f61724d0_shutterstock_447317020.png'; $('#IMAGE-ELEMENT') .fadeOut(10) .delay(10) .queue(function (next) { $(this).css("background-image", "url(" + imageUrl + ")"); next(); }) .fadeIn(); console.log(2); } } }); gsap.to('#LAST-SCROLLABLE-CONTENT', { scrollTrigger: { trigger: '#LAST-SCROLLABLE-CONTENT', start: 'top center', onEnter: () => { var imageUrl = 'https://uploads-ssl.webflow.com/5f369e90e946a4c5add5fc1a/5f3fde6487584b24a32bac96_shutterstock_254033086-901x644.jpg'; $('#IMAGE-ELEMENT') .fadeOut(10) .delay(10) .queue(function (next) { $(this).css("background-image", "url(" + imageUrl + ")"); next(); }) .fadeIn(); console.log(3); }, onEnterBack: () => { var imageUrl = 'https://uploads-ssl.webflow.com/5f369e90e946a4c5add5fc1a/5f3fde6487584b24a32bac96_shutterstock_254033086-901x644.jpg'; $('#IMAGE-ELEMENT') .fadeOut(10) .delay(10) .queue(function (next) { $(this).css("background-image", "url(" + imageUrl + ")"); next(); }) .fadeIn(); console.log(4); } } }); gsap.to('#CONTENT-ELEMENT-1', { scrollTrigger: { trigger: '#CONTENT-ELEMENT-1', start: 'top center', /* onEnter: () => { var imageUrl = 'https://uploads-ssl.webflow.com/5f369e90e946a4c5add5fc1a/5f3d850c2c39379303de0a17_camion%20poster.png'; $('#IMAGE-ELEMENT') .fadeOut(10) .delay(10) .queue(function (next) { $(this).css("background-image", "url(" + imageUrl + ")"); next(); }) .fadeIn(); console.log(5); }, */ onEnterBack: () => { var imageUrl = 'https://uploads-ssl.webflow.com/5f369e90e946a4c5add5fc1a/5f3d850c2c39379303de0a17_camion%20poster.png'; $('#IMAGE-ELEMENT') .fadeOut(10) .delay(10) .queue(function (next) { $(this).css("background-image", "url(" + imageUrl + ")"); next(); }) .fadeIn(); console.log(6); } } }); </script> Thank you !
  20. Hello. Ran into a problem. I am trying to animate wheel like draggable. function is "slideAnim". Can you tell me what I'm doing wrong? Thanks .
  21. Hello. I need your help. I don't know gsap well yet. But I need to create an animation, and I don’t know how to do it. This is the slider. Can you make it infinity? And also do it on a scroll, but not so as to turn the mouse wheel on the slide. Can smoothly wheel the slider, and when you stop turning, the slide that is more captured is the one that becomes active? I understand I probably want a lot. But I already don’t know what to do. Help me please. Thanks to everyone who will respond. Perhaps there are other options for how you can do this. I will be glad for any help Here is an example site and I want to repeat this slider https://damiankujawa.pl/en
  22. Take a look at this example Progress bar indicator while scrolling at end of scrolling progress bar hides I want to use ScrollTrigger width on scroll and hide it slightly at the end ? how to set delay on property in ScrollTrigger ? or we have to use two scrollTrigger one for width one for hide ?
  23. I am new to learn in GSAP , Can any one help me to solve this issue, I want to start my light when my fan start, Both need to be same scroll start and scroll end. Here is my code gsap.registerPlugin(ScrollTrigger); gsap.to("#fan", { scrollTrigger: { trigger: "#fan", toggleClass: 'active', scrub: true, start:"top 85%", //when top of fan passes 75% viewport height end:"bottom 45%", //when bottom of fan passes 25% viewport height toggleActions:"play pause reverse pause" }, perspectiveOrigin: "center 100vh", ease: "none" }); gsap.to(".lamp", { scrollTrigger: { trigger: ".lamp", endTrigger: ".footer", toggleClass: 'lampMove', scrub: 1, markers: true, start:"top top-=850", //when top of fan passes 75% viewport height end:"bottom top", //when bottom of fan passes 25% viewport height toggleActions:"play pause reverse pause" }, });
  24. Hello Sir ! I want Some Optimization On my Custom Cursor Example and most importantly i want to remove .hover-active on scroll ( plz suggest some logic in the place where i comment in codepen ) in the best way as calling a function on scroll may create lag or jank
  25. I am trying to make an animation work. The structure of design is such that. Intro section is on the top of the website. Once the user scrolls through the intro section a animation runs which basically moves the intro section to (-)ive y-axis until it goes away. Once the intro goes outside of the I have to remove the intro section altogether(or prevent it to be scrolled back to the intro section). I was able to set the animation up. But the problem is In my animation when my Intro section animates my hero section with other sections start to scroll. I don't want the hero section or any other section on the page to scroll until the intro section goes away. I am 10 hours into this now. Still unable to fix this.
×