Leaderboard

With all that I forgot to implement main effect of revealing text. https://stackblitz.com/edit/gsap-react-multiple-elements-pvnr8v?file=multiple-elements.js

I know that demo, I've read over its code and took it apart at some point in the past. It runs off shaders and as Carl has said, it's not for beginners. It was not designed to work out of the box by simply creating a new Slide. You will need to tinker in the code that informs the shader what to do as well as the calculations to break apart the images and which image to show. If this is your first attempt to work with ThreeJS, you will need to dive into shaders as well The Book Of Shaders is a great starting point even if it is an unfinished book.

Hi, I think your best bet would be to reach out to the author of that demo. He's extremely advanced and I suspect he wrote it in a way that could be extended without much trouble. We really have to keep our support focused on questions related to the GSAP API. Digging into hundreds of lines of code that we didn't write can be quite time-consuming and something that we just don't have the resources for. Perhaps someone else will stumble into this and enjoy the challenge.

Hard to guess what could be happening in your actual code. And it is impossible for onComplete to fire before tween completes, unless you are using stagger tween. In stagger tweens, onComplete gets fired for every single tween. You need to pass 5th parameter as function for onCompleteAll callback. https://greensock.com/docs/TweenMax/static.staggerTo() Apart from that it is impossible for us to help without demo showing problem. But I am sure there must be something else in your code that must be causing this issue.

Your snippet is fine. Can you post a reduced test case showing the problem?

Sahil, this makes a lot of sense. Thank you for explaining everything and providing examples. I have just started to scratch the surface of what GSAP can do but this definitely points me in the right direction. Cheers!

Mhhh.... seems to work here: https://stackblitz.com/edit/block-reveal-effect-with-greensock-17645 Perhaps there was a momentary issue with the bundling process

Thanks for the demo, unfortunately it is incredibly confusing due to the language (we're primarily English-speaking here) and the fact that there are 500+ lines of code. I'm confident your issue could be illustrated with less than 50 lines of code. Perhaps you could make something very small and clear... like you press a red button and something that is the colored red moves. press the green button and the green thing moves. Very simple like that. We don't know what the words Vakantiebudget, eindVakantiekilos, huis, gemisstat3 mean so when we see those as targets of tweens, we have no idea what we are supposed to look for. I'm sure if you can create a super simple timeline or 2 with one or 2 clearly named objects moving around, we will have a better chance of being able to help. Thanks

Happy to help! Here is less complex solution using invalidate. Instead of using another object, I am animating element directly. On resize, activeTween gets invalidated to record new values. I have left some comments for key parts but this is far less complex and better for performance because we are not creating new set tween on every frame.

That's tricky mainly because you want to change the duration of the tweens but changing duration of tweens that are on active timeline create weird effect because you are stretching timeline's duration so it just stretches from same start position. You can't add these tweens to any timeline, only thing you can do is change timescale of whatever that timeline is but still going to be tricky situation if it is complex animation. Here is a bit more simplified demo, now instead of animating element I am animating another object between 0 to 1. Because animating actual element gets too tricky. And then using the onUpdate call to update position of element. When move function is called I am creating new tween and assigning it to currentTween variable. I am using another variable, currentVars. To record start and end position that I need to create new tween on resize. onResize if currentTween is actually active, then kill currentTween. Then call move function to create new tween. See if this works for you, I am not sure if there is better way but if I come up with something then I will let you know.

You can create two timelines then add them to master timeline at position 0. master.add(tl1, 0); master.add(tl2, 0);

Hi guys, I just want to contribute with my findings in case others ran into this. I had been struggling getting GSAP's Draggable to work with Next.js and have finally found a solution. Next.js does Server Side Rendering (SSR) so pages rendered on the server had issues loading the GSAP NPM modules. Please note that pages worked just fine client-side. ERROR: import TweenLite, { _gsScope, globals, EventDispatcher } from "./TweenLite.js"; ^^^^^^ SyntaxError: Unexpected token import To resolve the issue with GSAP not being transpiled, I installed next-plugin-transpile-modules npm install --save next-plugin-transpile-modules Then I modified/created my next.config.js file according to their instructions on their NPM page. https://www.npmjs.com/package/next-plugin-transpile-modules Draggable finally worked after that (only if throwProps was set to false and you did not import ThrowPropsPlugin). However, if using a plugin like ThrowPropsPlugin.js it would display an error message like: TypeError: Cannot read property 'defaultView' of undefined Around line 515 of the ThrowPropsPlugin.js file, I changed it: //FROM THIS: _doc = _gsScope.document, //TO THIS LINE I FOUND IN DRAGGABLE: _doc = _gsScope.document || {createElement: function() {return _dummyElement;}}, After that, I just did "npm run dev" and the pages rendered on the server side were fully functional as expected. Hopefully this helps somebody out! Guys at GSAP, is there any harm in changing that line in the ThrowPropsPlugin? If not, would it be a good idea to update the plugin and other plugins for others who purchased the membership with GSAP so they don't run into this issue that I encountered?

It sounds like maybe your environment isn't loading CSSPlugin (that's what applies the transforms to DOM elements in cases like this). Are you enabling tree shaking in your bundler maybe? If so, I bet it's dumping CSSPlugin (and it shouldn't). One solution is to just reference CSSPlugin directly in your code somewhere so that it doesn't get dumped, like: import CSSPlugin from "gsap/CSSPlugin"; const plugins = [CSSPlugin]; Does that resolve things?

Interesting! That means there has to be something in my code, causing the wrong math Thank you very much for the nicest example, Blake!

Does Tween1Tl.seek("startLabel").pause(); work for you? If not, would be great if you can post a demo.

Hi @Sahil, Your concept is very tricky, extremely creative, worth 5 likes! When there's a will there's a way. Super performance. Sahil, thank you so much. Kind regards from Hamburg Mikel

I tried that actually but stackblitz was giving me weird highlights throughout the code and grayed out ref attribute when I used it on those elements, so I assumed ref will work on parent node only inside loop. Still overall I am impressed stackblitz just hope code highlighting won't be issue locally.

Well @Sahil is spot on (that's why He is a superstar around here ). The only thing I'd change is using the ref callback instead of reaching to the DOM directly. So instead of this: componentDidMount(){ const loaderContainer = document.querySelector("#loader-container"); const loader = document.querySelector("#loader"); this.tl .to(loader, 1, { y: -250, delay: 0.3 }) .to(loaderContainer, 0.2, { alpha: 0, display: "none" }; } I would create a reference in the constructor: constructor(props){ super(props); this.loaderContainer = null; this.loader = null; } Then in the render method use the ref callback: render(){ return <div> <div ref={ e => this.loaderContainer = e }> <div ref={ e => this.loader = e }> </div> </div </div>; } Finally in the component did mount method: componentDidMount(){ this.tl .to(this.loader, 1, { y: -250, delay: 0.3 }) .to(this.loaderContainer, 0.2, { alpha: 0, display: "none" }; } But beyond that small detail just do what @Sahil is doing and you'll be fine. Happy Tweening!!

Yes but you probably don't need to if you can structure your columns differently. In following demo I am animating containers so you won't have to write same tweens again and again to achieve that effect, or use a loop? Would be a lot easy for you to edit in future. Also, if you want to translate element in percentage then you can instead use yPercent. That's because your columns animate within a second but your quotes animate over six seconds. So when you scroll, all slides animate first then rest of quote tweens start playing because one's duration is 1 second and another's is 6. You can either construct your timelines with same duration or explicitly set one timeline's duration to another.

It seems like similar question from last week. As advised, please post a reduced test case demo of what you are trying to do and elaborate your question more so we can understand better. Take a look at following thread to see how to create demo,

Habit mostly. It's also faster. And with FLIP animations, sometimes I don't want my props to permanently removed. If an animation is interrupted, getBoundingClientRect() can give you unexpected results because it takes transforms into account. Coordinates can be confusing. From this post. https://greensock.com/forums/topic/17406-is-there-a-default-x-y-of-element/?tab=comments#comment-78419 Sometimes I need to temporarily clear the cssText in order to do some calculation. // save and clear cssText var cssText = myElement.style.cssText; myElement.style.cssText = ""; // some calculation // put cssText back myElement.style.cssText = cssText; And sometimes I need to get a transform value inside a calculation. clearProps will remove the _gsTransform object from the element, which could throw an error if you're not careful. // Error TweenLite.to(element, 1, { x: 100, clearProps: "all", onComplete: function() { console.log(element._gsTransform.x); } }); // All Good ? TweenLite.to(element, 1, { x: 100, onComplete: function() { element.style.cssText = ""; console.log(element._gsTransform.x); } });

I'm pretty sure getBoundingClientRect works in all cases. The circle looks weird because it doesn't have corners, but it's correct.