Search the Community
Showing results for tags 'scrollTrigger'.
Found 918 results
-
Hello everyone I need a simple solution. This is my website http://araf.dynamicflowdev.com. I want to the parallax run with the sidebar scroller. Now what's happening now: When I scroll down full section goes up. But I don't want this. What I want: I want when user scroll, every section will go up as scroll. Not the full section. I don't want to scroll full section. I want something like this site https://nagama.digital/ On that website, scrolling is too smooth and works perfect. I want something like that. I want the smooth scroll. Here is my js code: gsap.to(".custom_panel:not(:last-child)", { backgroundPosition: `20% ${+innerWidth / 60}px`, yPercent: -100, ease: "slow", stagger: .5, scrollTrigger: { // markers: true, trigger: "#content", start: "top top", end: "+=300%", scrub: 8, pin: true } }); gsap.set(".custom_panel", {zIndex: (i, target, targets) => targets.length - i}); Here is my css code: #content { width: 100vw; height: 100vh; position: relative; top: 0; left: 0; overflow: hidden; } .custom_panel { position: absolute !important; will-change: transform; min-height: 100vh; } Here is my view: http://araf.dynamicflowdev.com
-
I'm trying to animate a page with multiple sections. When scrolling, the area should be blended directly (no vertical movement). It works correctly when scrolling down (see demo). It just doesn't fit when scrolling up. What am I doing wrong? Thanks in advance!
-
Hello there, First post here, and only just starting out using your wonderful plugins and discovering js at the same time through all this... I'm sorry if this question is not even worth asking or if there have already been talks about it (I did search without much luck). I'm basically developing a few blocks for the Gutenberg editor in Wordpress, and wanted to use ScrollTrigger to allow for scroll animations etc. The thing is, since Gutenberg is an editor, everything on the backend is dynamic (no problem for the frontend), and I was wondering if it was possible to change the values in the ScrollTrigger config so that when a user selects a type of animation (triggered by a class), that ScrollTrigger automatically updates its config and thus the user gets a real-time view of what he's selected like animation. I have tried a few things here and there, found this thread here: But I'm either going at it the wrong way or just don't understand... Is it even possible to update the ScrollTrigger config or do I have to kill it and renew it every time the class I want to toggle changes? Thanks for your help!
-
Hey guys, I'm a bit embarrassed to post this whole mess here, I bet you have a thousand ways how I could optimize and restructure my code, all comments are welcome. But my main issue is this: This is a fairly complex (for my abilities at least) animation which was surprisingly easy and intuitive to set up with gsap and the scrollTrigger plugin. It has 8 content section that define the scrollTriggers. Everything works beautifully smooth when you scroll through it at a normal speed. (Only look at the animation please, i didn't copy and paste all the page and font formatting CSS with it, only the stuff necessary for the layout and animation) The svg "#illu-workdays" is hidden at the beginning and is tweened visible by the third scrollTrigger. It stays on and has some subtweening going on in the next few scrollTriggers but is tweened to autoAlpha: 0 and yPercent: -100 in the 7th scrollTrigger. It then stays hidden. However, if you scroll super fast all the way down from the top (or, probably a more common case would be using an anchor link jump) to the last section, some unexpected stuff happens. One of the earlier triggers seems to override the one that hides it (since it maybe has duration that's longer than it takes to get to the bottom?) , even though I would expect that the toggleActions ( I set them to "restart complete restart reset") would take care of that? Do you have any advice on how to approach this issue in particular and maybe a complex scrollTrigger animation like this in general? Thank you in advance for any help and suggestions, it is highly appreciated! Kind Regards, Simon
-
I'm trying to apply a scrub/scrollTrigger to an animation, if I exclude the ScrollTrigger I can get a smooth animation in the tl but applying ST transforms it to on/off with no transistion. It is code borrowed & butchered from the talented and helpful of this forum so apologies for the state of markup, lot of rooting around trying to make sense of things. What i want to achieve is an 'onload' animation - SVG expands - which is then reversed on scroll & scrub, some animation I can get to work thanks to the ST video, which made it look too easy Thanks for any pointers on my mistakes, it is apparently a great education...
-
Hey, guys. Thanks to everyone who created this wonderful scrollTrigger. How about a few scrolls... scrolling in another scrolls ...there are three sections, and there are three more sections in the skin that need to be animated for the scroll. I'm sure ScrollTrigger can handle that, but what tips will be at the start... ? here's a example. ↓ example.mp4 ↓↓
-
Welp, this is embarrassing. As my username suggests, I'm a total newbie to web design, animation, etc. And I can't for the life of me get the simplest ScrollTrigger functionality to work. They all just animate at the same time no matter what I do. What am I doing wrong?
-
Hello there! I'm new to GSAP (and CodePen, as it so happens), I've been lurking for ages as I worked on a personal project that I wanted to include animations with. I waited for ScrollTrigger to come out and immediately jumped into it as soon as it came out! So far I'm really impressed with GSAP and hope to bring it into my work life as well. Anyway, this could just be me being an amateur, but I'm having an issue trying to pin the same thing multiple times in a row. Basically I want to stick the whole section as it hits a certain div, keep it stuck for a few hundred pixels' worth of scrolling, then unstick and re-stick it almost immediately after for another div. Unfortunately, that's creating an issue where, at least from what I understand, the scroll-start and scroll-end get all messed up because they're not accounting for the 'distance' that the section was stuck. Mind you, I tried pinning the 'page04' div by itself and then pinning 'page05' for its turn and that worked well enough... but I would later have to pin 'page05' multiple times as well and it was the same problem. Genuinely not sure if this is a bug or just a mistake of mine, can anyone please help? Thanks! PS: Please let me know if you need additional info, like I said, I'm very new at this.
-
Hi! On my old demo i try 3.3.2 version of ScrollTrigger. ScrollTrigger with id 'Change between slides" stop working, what changed on this version? ScrollTrigger.create({ trigger: '.pinwrapper', start: `center center`, end: "center center", markers: true, id: "Change between slides", animation: tl_inout, toggleActions: "restart complete reverse complete" }) Thank you!
-
Hi there, first of all thank you so much for having gsap and all the plugins to use!! Especially the scrollTrigger Plugin! Thanks for all that work. I am totally new to the forum, this is my first post, so hopefully i am doing everything right. If not, please let me know :). I am thinking of a case where i do have some content. After that something like a pre-footer-section (like a second navigation) and the footer itself will follow (see the codepen i provided). The pre-footer-section should stay sticky until its ghost appears and should then scroll up with the rest (like position sticky does). Is it possible to get that done with scrollTrigger? (i could use position: sticky, it would be perfect for this szenario, but if you need IE11 it will break...). Thank you in advance for your help, tomekk -
Hi, I am wondering, why my transition animation is just played on my first section and not on the following. I added the same class (.parallax) to both my text boxes. Isn't the animation suppose to play on every (each) element that has the class "parallax" applied to it? See my CodePen. Thank for the help!
-
Hello! I'm importing ScrollTrigger into a React component and noticed the ScrollTrigger import redlining. I installed gsap with yarn. I tried including the @types/gsap package but I see that all of the types are included in the gsap package already. There is a scroll-trigger.d.ts file in the gsap package but my import can't seem to find it. I've tried importing a few other plugins and they work as expected. Let me know if you have any ideas or if there's any additional info that I can provide. Thanks! Error message: Could not find a declaration file for module 'gsap/ScrollTrigger'. '[directory-name]/node_modules/gsap/ScrollTrigger.js' implicitly has an 'any' type. Try `npm install @types/gsap` if it exists or add a new declaration (.d.ts) file containing `declare module 'gsap/ScrollTrigger';`
-
Hi folks, I want to use ScrollTrigger for a UI component on a mini-site but I can't come up with the best way to toggle the scroll control between elements, if thats even possible. I understand that the typical use cases is to sequence animations/events to the scrollbar for the page itself, but in this case I am trying to use that as the interface for spinning through some items in a list i.e. on s per container basis instead of the whole page. I've brute forced several combinations but cant find one that works well. The codepen I included is sourced from another developer who had the initial idea I forked from and I have restored it to a point where the basic interaction can be seen. What Im trying to change is make it so 2 of those can be on a page at the same time and use JS to toggle which of the two receives the updates. I saw the "scroller" property in the documentation but there must be something about the relationship of the trigger to the scroller element that im not grok'ing because all the ways I try to combine them i either end up with no scrolling or back to scrolling from the viewport. I was able to get one version to run with 2 on the page but they both update together because both instances react to the triggers. So something like that works if i can just disable one or the oither without having to rebuild the whole thing or lose the state of the animation by doing .disable(). Any assistance would be helpful. Thanks!
-
This is a guest post from one of the best teachers of GSAP, Carl Schooff, also known as SnorklTV. If you're new to GSAP or just looking to learn about the GSAP 3 syntax, his video courses are second to none! I can't tell you how many hundred's of questions I've seen in the GreenSock forums about controlling GSAP animations on scroll. I'm so happy there is finally a genuine GreenSock tool to power the future of scroll-driven animations. Before I get into the specifics, it's worth a moment of time to honor those that got us here. A short history of Scroll-driven Animations John Polacek paved the way in 2013 with Superscrollorama, a jQuery plugin that used GSAP under the hood. Many amazing sites were created with this highly-acclaimed, ground-breaking, and trend-setting tool. In 2014 Jan Paepke took the reins and did a complete re-write and SuperScrollarama became ScrollMagic. ScrollMagic was hugely successful as it offered a slew of new features. Excellent demo files made the tool easy for beginners to understand. Awards sites exploded with many clever effects made with the ScrollMagic and GSAP combo. However, as with many solo-led open source projects, it's popularity created a hefty support burden that couldn't be managed. As issues went unanswered in the ScrollMagic repo, more users found their way to the GreenSock forums asking for support on a product GreenSock didn't create or have any way of fixing. ScrollTrigger is born On June 1st, 2020, GreenSock released ScrollTrigger to a sold out audience via a historic YouTube Premiere. ScrollTrigger was built with a totally fresh perspective on how GreenSock animations should be controlled via scroll. Not only does the API offer more features than it's predecessors, but it has a strong focus on performance which really shines in this "mobile-first" world. And as you can expect with any GreenSock product support is phenomenal. For a full list of features, you'll need to check out GreenSock's ScrollTrigger API Docs, but my job here is to get you up and running quickly... so let's go! Watch the Video This video is from my course GSAP 3 Express. I've got over 6 hours of training and loads of exclusive demos to help you master the GreenSock Animation Platform from the ground up at creativeCodingClub.com As always, I load my videos up with info so that I don't have to write a ton of stuff, but here are some key points. Get ScrollTrigger and GSAP ScrollTrigger is hosted on a CDN along with GSAP. Just use the script tags below to load it into your page. <script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/ScrollTrigger.min.js"></script> Register ScrollTrigger It's recommended to register ScrollTrigger in your JavaScript to avoid tree-shaking with build tools. gsap.registerPlugin(ScrollTrigger); You can get recent CDN Urls from the GSAP Overview in the docs. For use with npm or more advanced build tools check out the GSAP installation videos. Super Basic Demo with a Single Tween The animation is super slow so that you can see how the animation reacts to entering and leaving the scroller-start and scroller-end positions. See the Pen ScrollTrigger QuickStart by Snorkl.tv (@snorkltv) on CodePen. Control a Timeline with ScrollTrigger See the Pen GreenSock ScrollTrigger Timeline by Snorkl.tv (@snorkltv) on CodePen. GreenSock's Toggle Action Demo In the video I explained how toggleActions work and how important they are. For each toggle event (onEnter, onLeave, onEnterBack, onLeaveBack) you can assign an action (play, pause, restart, reset, resume, complete, reverse, none). You'll assign a toggleAction via a 4-part string like "restart pause resume reverse". The best way to understand how they work is to play with the values in the demos above and study the demo below. See the Pen toggleActions - ScrollTrigger by GreenSock (@GreenSock) on CodePen. I'm hoping these resources help get you up and running quickly. For more inspiration check GreenSock's massive collection of ScrollTrigger Demos. What's next? I've only scratched the surface of what ScrollTrigger can do. I'll definitely be creating more training on this awesome tool. If you need help learning GSAP and want to take your skills to the next level check out my courses at CreativeCodingClub.com. -
Hi! First of all - thanks for the wonderfull ScrollTrigger plugin! It's amazing! Now to my issue: When I try to snap on iOS I get some very laggy scrolling - just like back then with this issue: So now I wanted to know if there is a possibility to pass the autoKill attribute to the snapping. I tried to simply use it but wasn't that lucky I'm building something like this: https://codepen.io/team/pixelart/pen/mdVbobo In this codepen it seems to work, but not in my project (I can't see a difference). First I thought it is caused by the scroll-behavior: smooth, but it still happens after I set it back to auto. Any idea what could cause the lag or how to fix this? Thanks, janein
-
Hi, I am trying to get the Scroll Trigger to work on my gatsby website. I am a beginner at both Gatsby/React and GSAP so forgive my ignorance. I created a sandbox of how I did this in Gatsby. It works on development build like here on this sandbox but not when I try to go production build. I get this error "failed Building static HTML for pages". Does anyone know what I am doing wrong? Thanks! https://codesandbox.io/s/unruffled-cannon-v5wh4?file=/src/App.js
-
Hey! First of all, thanks for this great plugin!!! But I have some trouble, when you enter a block, left side should be pinned and it's working good, but after entering every content block I want to remove "-=100" of yPercent of all spans, but all I'm getting only restart animation, not adding "-=100". If you uncomment in css .numbers overflow:hidden; you will understand what I want. What am I doing wrong?
-
On resize, when disabled, the dom object keeps the animation. I want it reset to its original position when disabled. Updated code below with working resize events let tl = gsap.to(child, {y: -50}), st = ScrollTrigger.create({ trigger: child, start: "top 80%", end: "bottom 10%", scrub: true, animation: tl }); console.log(st.animation); // tween if (Foundation.MediaQuery.atLeast('xlarge')) { st.enable(); } else { st.disable(); } $(window).on('changed.zf.mediaquery', function(event, newSize, oldSize) { if ( newSize == 'large' && oldSize == 'xlarge') { st.disable(); ScrollTrigger.refresh(true); } else if ( newSize == 'xlarge' && oldSize == 'large') { st.enable(); } });
