Leaderboard

I managed to deploy GSAP Shockingly to Vercel using yarn and have posted a solution on the link below. Might be worth checking for users who don't want to switch their projects over to npm.

Hi, Just want to share how I managed to deploy GSAP Shockingly to Vercel using yarn. Steps below: 1. Create a .npmrc file on your project directory that contains the following: //registry.npmjs.org/ @gsap:registry=https://npm.greensock.com //npm.greensock.com/:_authToken={YOUR_GENERATED_TOKEN_HERE} 2. Update your package.json file and add the GSAP dependency below then run yarn install "@gsap/shockingly": "npm@gsap/shockingly" The package has to be installed with the @gsap prefix to match the @gsap custom registry path defined in .npmrc (or the ENV_VARIABLE in Vercel) You can also install it similar to the yarn command below. Technically, it should work the same way but I haven't tested it yet. yarn add @gsap/shockingly gsap@npm:gsap/shockingly 3. Once installed, you can import GSAP via ES Modules or UMD/CommonJS. In my case, I had to import using UMD/CommonJS as I was having issues with ES Modules using Next.js. ES Modules import { gsap } from "@gsap/shockingly/gsap"; import { ScrollTrigger } from "@gsap/shockingly/ScrollTrigger"; UMD/CommonJS import { gsap } from "@gsap/shockingly/dist/gsap"; import { ScrollTrigger } from "@gsap/shockingly/dist/ScrollTrigger"; Note: If your project is using Typescript, you might encounter issues about missing types. To resolve this, add this line to your project's tsconfig.json. "files": ["node_modules/@gsap/shockingly/types/index.d.ts"] 4. In Vercel, go to your Project then Settings -> Environment Variables and create an environment variable for .npmrc. Example below: Name: NPM_RC Value: //registry.npmjs.org/ @gsap:registry=https://npm.greensock.com //npm.greensock.com/:_authToken={YOUR_GENERATED_TOKEN_HERE} 5. Do a test deployment and if everything is set up correctly, Vercel should install GSAP and build the site without any issues. This solution is specific to issues deploying to Vercel when using yarn. Also, if you have a Business license, just change all shockingly references to business. Happy to assist anyone who's having the same issue, and if this solution works for you, please let me know - Chris Project Stack: Next.js (Typescript) - v12.3.4 Yarn - v1.22.19 Node - v18.13.0 (I can confirm that it also works on v16 and above) GSAP License - Shockingly Vercel

In fact @iDad5 is right. A ScrollTrigger.batch() method returns an array of ScrollTrigger instances as stated in the docs: https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.batch() So you have to loop through each one and refresh it or just call the refresh method on the global ScrollTrigger constructor if you don't have any other ScrollTrigger instances: https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.refresh() Happy Tweening!

You mean like this?: https://codepen.io/GreenSock/pen/BaPOZaM?editors=1010

Yes it's totally possible to do everything on that site with GSAP. It's important to note that the hero animation is basically a series of images stitched together in a <canvas> element to simulate a video. If you inspect the page you'll see this canvas element <canvas width="1120" height="1002" class="ImageSequencerstyled__Canvas-sc-b2vw9p-0 cJWUKl"></canvas> Notice it has a class containing "ImageSequencer". That's a good clue! If you check the network settings you'll see a TON of images being downloaded. It would be totally possible to use ScrollTrigger to control that sequence of images being rendered.

Once you have a proper layout set up, the GSAP side of things could look something like this; gsap.to(".theContentYouWantToTweenOn", { y: () => { return -(document.querySelector('.theContentYouWantToTweenOn').scrollHeight - window.innerHeight) }, ease: "none", scrollTrigger: { trigger: ".someWrappingElement", start: () => "left left", end: () => "+=" + document.querySelector('.theContentYouWantToTweenOn').scrollHeight - window.innerHeight, pin: true, pinSpacing: true, scrub: true, horizontal: true, invalidateOnRefresh: true } }); It's pretty much similar to what you can see with fake-horizontal-scrolling tweens in vertical scrolling scenarios, like the one shown below, except for all the x-related values being exchanged with y-related values and vice versa; additionaly you'll want to set horizontal to true on your ScrollTrigger, when you are moving in a native horizontal scrolling environment. Once you have tried something yourself, we'll be happily helping with the GSAP side of things you tried out and got stuck on - but again, please keep in mind, that these forums are not intended for requests á la 'please give me an example for how to do this effect'. https://codepen.io/akapowl/pen/dyvygmj

Thanks for reporting that. Sorry about any confusion. Is this [upcoming release] version better?: https://assets.codepen.io/16327/Observer.min.js (you may need to clear your cache) In the meantime, a workaround would be: onPress: self => { if (self.event.button) { self.disable(); self.enable(); } }

I do think the problem doesn't come from ScrollTrigger. I've made some change to the "running model" code pen to see what's wrong. Turn out, the method to link THREE js and ScrollTrigger from that Codepen just broken with the animation is too long and/or the end-amount is big. The combination of both result in proxy.time jumping

I wouldn't worry about it at all. It's cheap. ScrollTrigger.create({ ... onUpdate: self => { if (self.direction !== self.prevDirection) { console.log("toggled!"); self.prevDirection = self.direction; } } });

Can you explain what you mean by "I want to start it from the beginning when I click a new tab button"? Do you mean that you want the scroll position to jump all the way up to the very top? If not, how exactly would you expect it to start over if the scroll position remained fixed? You're doing a good job of doing cleanup with revert(). You might want to consider using gsap.context() to make it a little bit easier, especially with scoped selections. See I'm not much of a React guy, but it sure looks to me like a fundamental problem in that setup is that when you update the state, it's firing the useEffect() BEFORE everything has fully rendered in the new state, thus there are still layout changes that occur after that point, throwing off the ScrollTrigger stuff. I don't have time to dig into all that right now, but here's a quick fork that uses a setTimeout() to show what I mean: https://codepen.io/GreenSock/pen/jOppZqX?editors=0010

Thanks guys for the solutions. I'm still on my JavaScript learning journey so I am a bit unaware of best practices/efficiency in certain situations so I appreciate the revision help with the scroll up button as well!

Yep, @Rodrigo is correct about all that. Also, this is extremely inefficient: $(window).scroll(function () { // scroll-up button show/hide script if (this.scrollY > 500) { $('.scroll-up-btn').addClass('show'); } else { $('.scroll-up-btn').removeClass('show'); } }); And could be replaced with a much more efficient ScrollTrigger: ScrollTrigger.create({ trigger: ".scroll-up-btn", start: 500, end: 99999, toggleClass: "show" }); Be very careful about applying CSS transitions to anything that you're animating with JavaScript too. I wouldn't recommend this either: $('html').css('scrollBehavior', 'smooth'); Because that can throw off scroll positioning. It'd be better to just do simple gsap.to(..., {scrollTo: ...}) to get a gradual result. Don't forget to load ScrollToPlugin. If you're trying to have each .hr line animate in when you scroll it into view, you could do something like: let lines = gsap.utils.toArray(".hr"); lines.forEach(line => { gsap.from(line, { width: 0, duration: 3, ease: "power4", scrollTrigger: { trigger: line, start: "top 80%", toggleActions: "play none none reverse" } }); }); I'm not sure what you were trying to do with your timeline animation (ScrollTriggered?) but here's a quick fork: https://codepen.io/GreenSock/pen/rNrZYoG?editors=0010 I hope that helps. Enjoy the tools!

This is essentially the same thing. But using GSAP https://www.ju.st/learn

The examples by @PointC are using the DrawSVG Plugin: https://codepen.io/GreenSock/pen/bNdLyR I don't know how to make it simpler than this, it's just 12 lines of code! 🤯 https://codepen.io/PointC/pen/KKPZgpL/58208432ba7ab0ca30cc4ea6d84a988f I suggest you to take a look at the docs and examples of DrawSVG and watch this video about it: Happy Tweening!

For that you'll have to break your words into letters. For that create a path for each letter using an SVG editor like Boxy SVG, Adobe Illustrator or Inkscape. Hopefully this clear things up. Happy Tweening!

Yep, I would stick to that approach if possible, try to make it more flexible and dynamic actually. Sorry I forgot the example link, here it is: https://codepen.io/GreenSock/pen/bNdLyR Happy Tweening!

Nothing to be sorry about, no worries. You're more than welcome. Let us know if you have more questions. Happy Tweening!

Welcome to the forums, @TheSylvester. Sorry to hear about the trouble! Sounds like you've put in a lot of effort trying to figure it out on your own. What's particularly frustrating is that it works in CodePen fine, right? A few questions for you: Is there ANY way we can reproduce the issue in CodePen/CodeSandbox/Stackblitz? Any tricks? It's just super hard to troubleshoot when we can't reproduce it. Did you make sure you're using the same version of the GSAP files in the CodePen and your "broken" version? Any other differences? Have you tried removing React from the equation? I noticed you're not doing proper cleanup in React. I'd STRONGLY recommend reading this article: gsap.context() is your new best friend in React, trust me. It's so convenient. Once we can reproduce the issue, I'm sure it'll become much more apparent what the issue may be. Right now I suspect something with React and improper cleanup.

thanks for your contribution @iDad5, I'll try it right away and come back with a feedback!

We actually built out a helper function to make this a lot easier: https://greensock.com/docs/v3/HelperFunctions#loop Does that help?

Hi, I'm stumbling around right now trying to solve my totally unrelated problem… The link opens to a project editor—which is a first for me—but interesting. I couldn't find out how to get the console in this view quickly so I just started up the normal dev-tools on the iFrame in question. There still seems to be the problem from before, that document.getElementsByClassName('fullpage-loader')[0]; leads you nowhere. I cannot find an element with the class: fullpage-loader anywhere in the htmlfiles....

I'm actually lost right now in a problem of my own, but as yours seemed related I checked, and it seems to me at a cursory glance that 'defererInstance' should be an Array of ScrollTrigger instances. So, you might have to execute update or refresh on the members, not on the array itself?

Hi, This is exactly the same error Jack already pointed out: const slides = document.querySelectorAll(".js-experience-slide"); console.log(slides); // <- Returns an empty node list So this is undefined: slides[0] // Undefined!! Please solve and work your JS/Logic issues since they are not GSAP related. Happy Tweening!

You have a ton of CSS in there so it's a little hard to tweak. But something like this. https://codepen.io/GreenSock/pen/MWBqKGB fyi - I wouldn't use vh on that container as the final solution, it feels a bit messy - I just couldn't add percentage height as the parent's styling also didn't have a height so it was automatically collapsed.

Hi, You can use the Text Plugin for a typewritter effect in SVG https://codepen.io/GreenSock/pen/RwBwJBm For animating handwriting check this tutorials by @PointC: https://www.motiontricks.com/animated-handwriting-effect-part-1/ https://www.motiontricks.com/animated-handwriting-effect-part-1/ https://www.motiontricks.com/svg-calligraphy-handwriting-animation/ Let us know if you have more questions. Happy Tweening!

Hello! Thanks for pointing on the issue with the start and end points. That makes sense now. I will give this a try and let you know. Thanks so much!

Hello, I import timelines from an external animations.js file to one of my Svelte components but I don't know where should I pause the imported timelines so that I can control them from from the master. Importing the timelines: import { islandsRevealTL, islandsZoomTL } from '../lib/js/animations'; Creating master timeline: masterTL = gsap.timeline(); masterTL.add(islandsRevealTL(), "islands-reveal"); masterTL.add(islandsZoomTL(), "islands-zoom"); Playing the animations on click event: <button on:click={() => {masterTL.play("islands-reveal")}}>Reveal</button> <button on:click={() => {masterTL.play("islands-zoom")}}>Zoom</button> Now the timelines just play all at once from the master timeline. masterTL.pause() Pausing the masterTL doesnt work. Pausing the imported timelines when adding like this: masterTL.add(islandsRevealTL().pause(), "islands-reveal"); works, but I can't play them with buttons. How can I pause all the added timelines and control them with a .play() method with the buttons? Thank you for any help.

So actually the error was with the gsap import: I changed this: import { gsap } from 'gsap/dist/gsap.js'; to this: import { gsap } from 'gsap'; And now it works!

Hi there! This looks like a CSS/positioning issue. I would recommend positioning your elements where you want them to end up - then using a .from tween to animate them from a transformed initial position. It's often helpful to create the animation without scrollTrigger first to make sure it's correct, then add scrolltrigger. Your demo also looks very different to the image screengrabs you've added so I'm a little stumped on how to help you in the codepen

Thanks Carl. Yes i did notice that they were using canvas. I also think three.js. Nice to see it's a series of images in a sequence. I've done that before with GSAP. Thanks for the heads up, much appreciated.

Hi, Have you tried with the enable/disable methods? https://greensock.com/docs/v3/Plugins/ScrollTrigger/enable() https://greensock.com/docs/v3/Plugins/ScrollTrigger/disable() Although those could be a bit expensive in terms of resources and time. Also is really required to scroll all the way up to check the canvas and the brightness of that particular area? I'm no expert in canvas but I assume that it has it's own coordinates system and that you could programmatically check those pixels without scrolling up and then back down. I understand that in canvas you can create a picture of an area using the toDataURL method: https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL I can't give you an answer for that but I can assure you that there is a good reason for this. I'm sure @GreenSock will provide it. Sorry I can't be of more assistance but as you mentioned without a demo is a bit hard for us to do a lot. Happy Tweening!

@GreenSock Thanks Jack, no issue with this version!

Hi there - this modified demo gives you the center 'active' element. You could change styling in the onUpdate callback - hope this helps! https://codepen.io/GreenSock/pen/gOvvJee

Those look like just JavaScript problems, unrelated to anything with GSAP. "Uncaught TypeError: Cannot read properties of null (reading 'querySelector')" That's because you defined container as document.querySelector(".js-experience-slider") but there is no such element. const proxy = container.querySelector(".proxy");

Hi, thanks for this quick answer. The solution you explain was my first idea, but then I changed when I found these opssibilities. And logically it has to be in range, or it won't work. Will send you an update when it's ready. Thanks very much for your swift feedback! Johan

Hi, That's completely possible, not really easy but possible. For high performance canvas stuff I'd recommend any WebGL library that you can get familiar with. The most popular ones are PIXIJS and THREEJS, so you should take a look at those. As for examples I can't really recall anything like that TBH, maybe another user has seen anything similar and could recommend a link or example. My first try would be using the Modifiers Plugin: https://greensock.com/docs/v3/GSAP/CorePlugins/ModifiersPlugin Happy Tweening!

ScrollSmoother is just a complex ScrollTrigger, so ScrollTrigger.refresh() will update it. Notice how it doesn't update if you comment out the refresh call in the click handler. ScrollSmoother (codepen.io)

I've tried all mentioned ideas... what ended up working was increasing the rotation.. if the animation is changing x,y,opacity,scale too slowly (ie too few pixels per second), rotation: 0.01 isn't enough. I instead just set the rotation with CSS to .01deg, and it's completely smooth now for all animations. transform: rotate3d(1, 1, 1, .01deg);

Hey piet. I highly recommend that you read my article on animating efficiently since it covers how to loop through elements and create animations like this. The main issue here is that you're splitting all of your texts in the same split. You need to split each panel individually. Same thing with creating an animation. https://codepen.io/GreenSock/pen/qBbaOdg?editors=0010

Hey Garth and welcome to the GreenSock forums! You could check if the element exists like so: if(document.querySelector(".loading-screen")) { gsap.to(".loading-screen", { delay: 2.8, top: "-100%", ease: "expo.inOut" }); } or you could use a variable for it: const loadingScreen = document.querySelector(".loading-screen"); // Also works with querySelectorAll // const loadingScreens = document.querySelectorAll(".loading-screen"); if(loadingScreen) { gsap.to(loadingScreen, { delay: 2.8, top: "-100%", ease: "expo.inOut" }); }

To suppress this warning, simply set nullTargetWarn to false in GSAP's configuration using gsap.config() Alternatively, use an if statement to detect if the element(s) exist or not and only create the tween if they exist. But no, you don't need to worry about the warnings. They're warnings for a reason!

Hi and welcome to the GreenSock forums. This particularly is not exactly a GSAP related question, more of a JS-CSS issue, but this subject has a special meaning for me (more on that later). Basically this can be solved by creating a loop, add a bunch of DOM elements and set the background position according to the element's position in the grid. This can get a little messy though, because of the amount of DOM elements involved in your case (200), but you can take advantage of the performance enhancements introduced since version 1.12: http://www.greensock.com/gsap-1-12-0-performance/ Here's a simple example I made some time ago, is not 200 pieces but the concept is the same, regardless of the number: http://codepen.io/rhernando/pen/euAvI Regarding the meaning this has for me. Turns out that my first ever post in this forums (back in the good ol' flash days) was about a grid animation and the first incredible support I got from a certain Carl Schooff, was in that post as well. Once the JS part of GSAP was released one of the first things I did was port that into JS. If anyone want's to go to the past here's the link for the original post: http://forums.greensock.com/topic/2268-tweening-a-for-loop-grid-solved/ Rodrigo.