Jump to content
GreenSock

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

Search the Community

Showing results for tags 'scrolltriger'.

  • 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 am trying to animated section with scroll created as components in React. You can find a similar effect to what I am trying to achieve here (the text on the right or the images inside the phone). In my animation I would like the headingOne to appear from the bottom of the screen and fade away towards the top of the screen, followed by the headingTow that should come from the right or left followed by the cards while the section is pined and only after the animation finished the normal scrolling would begin again. Doing this I have encountered some difficulties. One of which beaning an error that says ";" expected while using the TweenLite and I don't really see why... Also I am not use that I used gsap correctly. For the headingOne I would like to display it none, but only after the fade away animation finishes so the headingOne would come into the middle of the screen. I would greatly appreciate is you could take a look at the code pen and point out my mistakes. Thank you!
  2. Hello, I'm trying to make an animation that switches the viewport's background color depending on your scrolling position. The animation works great on Chrome and on FireFox, but Safari just looks bad, very laggy and the colors don't transition into the page, but rather just pop up with a delay. Here is my animation code (I am using Vue.js) backgroundAnimation() { let $projects = gsap.utils.toArray(this.htmlID + " .project-wrapper"); let projectListTl = gsap.timeline({ scrollTrigger: { trigger: this.htmlID, start: "top center", end: "bottom center", ease: "none", scrub: true, markers: false, onLeave: ({ progress, direction, isActive }) => document.documentElement.style.setProperty("--background", "white"), }, }); $projects.forEach(($project, i) => { projectListTl.to("html", { duration: 0.1, "--background": $project.dataset.projectColor, }); projectListTl.to("html", { delay: 0.3, duration: 0.2, "--background": "transparent", }); }); }, (The method above runs when there is an update on the component) updated: function () { this.$nextTick(function () { this.backgroundAnimation(); const self = this; ScrollTrigger.matchMedia({ "(min-width: 1024px)": function () { self.scrollAnimation(); }, }); }); }, Any ideas? Not sure where to start looking even. Thanks!
  3. Hello Gsap community, i'm trying to create a Website, where when I scroll through it, the Time of the Video which is permanently in the Background is connected to the Scroll. While i'am scrolling and passing certain points in the Video, different HTML Elements should appear / disappear. So for example from Second 2-6 from the video i want to display elements which explain this part of the video and so on. The Elements should not be pinned tho, because the Video itself has a scroll through like effect aswell. I unfortunatly don't have any working prototype.
  4. Hello, I would like to accomplish the following: Step 1. Scroll down to horizontal scroll section. Keep scrolling until image sequence finishes in slide 1. Step 2. After image sequence is finished, we need to horizontal scroll to slide 2. Then, we need to animate a background image position in slide 2 with some overlay text. Step 3. Stop horizontal scroll functionalities and scroll to rest of the page See attachment for a visual explanation. I have a basic understanding of ScrollTrigger, but I think this is a trick which can be implemented in a very specific way. Can someone please help me with this? Thanks!
  5. I'm coming to this having started from that support question. Many years ago I'd built a site based on this very old tutorial. Then, a few months ago I got some assistance on this in order to create a simple horizontal scroll, which worked pretty nicely. Today I've started to try and combine the scripts from support question responses, and the horizontal scroll pen, in the one I've included here (somehow I don't think that sentence makes any sense except in my own head) in order to emulate the behavior from that old tutorial. In any case, I'm not sure why it's not really working the way I think it should. I'm still fairly new to gsap, so I apologize in advance for not seeing things that should probably be obvious.
  6. Hi all, I just wondered the best practices when using Scrolltrigger and any smooth scroll library? I appreciate you guys want isolated code examples but due to the nature of this problem being sitewide I can't really do that. I'd really appreciate a bit of insight on how to make scrolling interactions less laggy in general. All I'm really doing is using a bunch of scroll triggers, nothing complicated and under 250 lines of code so really it should not be lagging. I don't need someone to fully audit the code or anything, rather I'd appreciate if someone could just have a quick look in the inspector and see if there's anything standing out that's causing my issues. I've come up with a few things that could be causing the problem. - Image size - RAF triggering too much - Not using dynamic scroll triggers with "for each" etc Here's my site i'm using scrolltrigger x asscroll - https://scrollablegsapdemo.webflow.io/
  7. Hello there, I have this script in use and it works great. My question now is, how to add a stop at the last slide and start the vertical scrolling with a button. Is that possible? Thanks for your help! Mirja
  8. I want to scroll trigger animation on the same element which has a gsap timeline animation running. In my code pen i have two elements ".H1" and ".SpinWrap h1". I want to spin ".H1" while gsap timeline is running, i want to do it in a way that gsap timelines and scroll trigger remember my scroll change value and get updated and keep playing when im not scrolling. If you look at ".SpinWrap h1" i can achieve the result by doing this hack of creating a wrap and target ".SpinWrap" and ".SpinWrap h1" by this way both gsap timeline and scroll trigger keep playing the way i want but i want to know is there any way that i can get the same result without creating wrap or targeting the same element.
  9. Hi, here is how I can make the header appear only when the scroll moves up. I think smooth scroll is preventing this because of its own page calculation. I can see it when I go to the top of the page. I want to see the header when I scroll up. Like the example here; https://aydindoganvakfi.org.tr/
  10. Hello, I want to do more than one pin operation, but it does not give a proper display in the second iteration. I want to see the visual content again after the pin content and then pin the content again
  11. Hi There! I am new in. using gsap but i like it. I am trying to make pages scroll page by page through scrolltrigger all is working perfectly but i want to speed up snap speed from one to another. I not mean this by scrolling speed the speed when we leave the scroll and then snap take the while to set. Is there any solution for this
  12. I am using the horizontalLoop function provided in the helper functions to animate different lengths of <h1/>s in my NextJS app. I am also using Sass to style my components. I have added the following code in my _app.js to make sure gsap calculates properly: import { useRouter } from "next/router"; import { ScrollTrigger } from "gsap/dist/ScrollTrigger"; function MyApp({ Component, pageProps }) { const router = useRouter(); const refresh = useCallback(async () => ScrollTrigger.refresh(true), []); useEffect(() => { gsap.registerPlugin(ScrollTrigger); router.events.on("routeChangeComplete", refresh); return () => router.events.off("routeChangeComplete", refresh); }, [router.events, refresh]); return <Component {...pageProps} />; } The problem I think is the refresh is happening before the document is loaded. So, I added the following code in my Marquee component: const gsapAnimate = () => { const boxes = gsap.utils.toArray(`.marquee-item-${uniqueId}`), tl = horizontalLoop(boxes, { repeat: -1, speed: 4 }); ScrollTrigger.create({ trigger: triggerClass, start: "top bottom", end: "bottom top", // markers: true, onEnter: () => tl.play(), onLeave: () => tl.pause(), }); }; useEffect(() => { window.addEventListener('load', gsapAnimate); return () => { window.removeEventListener('load', gsapAnimate); }; },[]); Now, the calculations are correct and it's animating well but when I navigate away from the page and get back, the animation stops. How can I get around this? What I Want: expectation.mp4 Current State: reality.mp4
  13. 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
  14. Hello, there is a reference scroll animation in the codepen link. Here, I want both the image and the caption text to appear as zoom in & out, how can I do that? Fade in & out right now I don't want that. Can you help me?
  15. 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?
  16. Hi, I want to animate this three section (red, green & blue), when first(red) section come on top of the browser i want to animate this red section to top, to reveal second section (green). And so one... I almost solved it, but I wish there was no white space between the sections, when scroll. Animation like this: https://teamway.io/ Tnx
  17. Hello, I wanted to do a development for my own project, but i ran into a problem. i am using Luxy Smooth Scroll in my project. I wanted to change the image by scrolling with the gsap pin, but Luxy Scroll is causing a problem and I couldn't solve it, can you help? This is my reference codes https://codepen.io/Danish_Khurshid/pen/jOByPGq
  18. Hi, Does anyone have any idea how to make an animation from this website https://teamway.io/. It is an animation of three cards, which are animated up on the scroll event. https://teamway.io/ Tnx
  19. 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
  20. I have a section middle of page and into this section i have inner scroll When user reached this section firstly pin the section until inner Scroll end then unpin the section on the parent scroll child scroll run until child scroll end.... Please i need help
  21. I used multiple timeline .When i scroll slowly everything works but scroll quickly animation jump and doesn't work . Anyone if you can help this,plz help me.
  22. Hi Team! I'm trying to setup a simple animation with a boat moving along a path as the user scrolls down the page. I had the boat moving along the path correctly, but then I added the next step which was to pin the whole map so you could actually see the full animation before it scrolls off-screen - and this proved kinda tricky! I went through a few different iterations of path-mismatch, and now the boat does appear to be moving along a line of motion, but it's as if the path is rotated 90 degrees and the boat goes bouncing around towards the left instead of going down the map along the dotted line. I must be calling the motionPath before the asset has loaded or something, right? Any other suggestions where I am going wrong will be massively appreciated! Codepen here (brown box in place of the boat) https://codepen.io/Allanw/pen/jOarMaO
  23. I am trying make my Sections Scroll through like in this example, but i want to extend the Time between Sections, aswell as have two Sublines. So if i enter a section the Headline and the first Subline is revealed and if i scroll more the first subline is replaced by the second Subline.
  24. Hi, I am fairly new to web development, so this may be a silly problem but please help me out: Using GreenSock | Docs | Helper Functions as a reference, I have animated two of my divs, which were animating perfectly on scroll in the page, until I tried to add a navigation bar to the page. For a mobile, it is a hamburger menu which when clicked, opens up the navigation bar on the right side of the page. It works perfectly as long as the viewport has anything but my scrolltrigger hooked divs. The moment one of the scrolltrigger related div comes in the viewport, the navigation stops displaying. Is it possible that there is some kind of conflict between the click EventListener of Navigation & DOMLoaded Eventlistener of the scrolltrigger as mentioned in the GreenSock | Docs | Helper Functions ? What should I do ? YOU WILL SEE THE NAVIGATION BAR ONLY IN SMALL SIZED VIEWPORTS. I have attached a sample codepen link and also 2 images which I hope will help you understand the issue. (Although a button is not visible but it works & is placed on top right of the codepen, please bear) Thanks in advance.
  25. Please tell me what I'm doing wrong. When you scroll the page from the beginning, the text gradually disappears. But when you scroll to the point where the first block of text is above the middle of the screen and refresh the page, all the text disappears and does not appear
×