Leaderboard

Hi @jp_uk81 There's a problem with the order in certain browsers. For example, Chrome reports the color first. element.style { filter: drop-shadow(rgba(0, 0, 0, 0.1) 0px 0px 14px); } My workaround, use CSS variables.

This might be somewhere else in your app. Can you create a simplified sample in https://stackblitz.com/ using just the sun component and all it's dependencies. It seems that you're not passing any props to it, so it shouldn't be a problem. Don't worry about the Morph SVG plugin, just use any other property like x, y, rotation, etc, so you don't expose your club member's plugin. The main point is to find out what is happening in the component did mount hook and how the intersection observer package is working with the child being passed, because in theory your code looks good and it should work as it is in the codepen sample.

Damn sniped during my sleep. I'l get you back Rodrigo, I'll find a React question and throw an answer there, you wait. So, Chris, the heretic React Dev is correct - the ideal setup would be to have some sort of shared state that would trigger the animation on the target component. But given that you want to trigger animations with a click I would assume you can, in theory, do that. It will boil down to whether or not you are using the correct moment to querySelect your element. If you give us a reduced case demo of what you are trying to achieve, we can take it apart and see what's going on.

I merged your questions to keep discussion in single thread. getBoundingClientRect gives you the position of element with respect to viewport. You don't see any problem with that because you are not using viewbox. Viewbox is attribute determines the SVG's internal co-ordinate system. In following demo you will see that viewbox is 200x200 but svg element is 500x500, so basically SVG is scaled up. Now when you use the getBoundingClientRect the horizontal distance between both rects is 250. Which is incorrect. getBBox ignores any transforms. Though I don't know why it isn't part of library or spec. You can read this another thread to learn more about all SVG weirdness:

Hi and welcome to the GreenSock forums. Vue works in a similar fashion as React, so perhaps your best choice should be to control the animation based on a state property that can be shared through components via props or through a store using Vuex. I haven't played a lot with Vue but there is this common is that you're supposed to update the DOM representation of the app using state, so I would try that approach. Also take a look at this article: https://blog.usejournal.com/vue-js-gsap-animations-26fc6b1c3c5a Finally see if you can use the native transition API from Vue to animate your component. This is highly similar to React Transition Group and both are based on ng-animate from Angular: https://vuejs.org/v2/guide/transitions.html Happy Tweening!!

If you don't understand what I wrote for you, follow @Dipscom's advice from above. Start small and build from there. Make a fork of my demo and strip it down to the bare minimum. Forget the image reveals for now. Just get the buttons working the way you want. Drop in a simple console.log() so you know things are working correctly. Once that's working and you understand why it's working, fork it again and start adding the images. Keep multiple copies of the demo in various stages of completion. That way, if something goes wonky, you can always jump back to a working version in which you understood everything. I'd also highly recommend the use of loops. See how your timelines and button handlers are exactly the same? Those could be easily created (& managed) in a loop. You can use a regular for loop or jQuery's each() method makes that type of thing super easy too. Happy tweening.

Ha. I can't win. I just got called out for not being literal when I said that nobody uses frames.

So it is on..??

OMG!! I need a brain transplant a.s.a.p! lol THANKS!!

Not quite, you wouldn't create a Tween until you needed. This is how I would go about it (have in mind I have no idea about your codebase, what you're using or how it is organized, this is just a suggestion) this.pinners.forEach(slots => { this.tweens[`pinGemScale${i++}`].scaleUp = this.scaleMeUp; }); // Somewhere else this.scaleMeUp() { const trg = this TweenLite(trg.scale, 0, { x:0.4, y:1, ease:Elastic.easeOut.config(1.2, 0.2), }); } But even if you were to go with the code you have suggested, GSAP is super optmized, the vast majority of times you experience jank, it will be because of the rendering of the screen, not the tweening. And, unless you are tweening hundreds/thousands of objects, it's unlikely that you will see any significant difference in performance.

if newTarget is the same thing and has the same value as oldTarget, stop here, return nothing to whoever called the function. --------------- You know we want to help you DD77, we like helping people out. But there's only so much time we can dedicate to one single individual. We tell everyone here that we keep this forums GSAP focused, otherwise we would be overwhelmed. Of course, we do also answer the odd generic JavaScript question here and there because we can. What we cannot is teach every little thing that exists on complex setups. The issue you have at the moment, has nothing to do with GSAP, it's simply how you are controlling the state of your 'application'. The solution is the answer I gave you earlier. It is now on your hands to understand the code you wrote yourself and adapt it to suit your needs. You need to go over your own code, understand exactly what each line is doing. Until you actually understand the code, you will be struggling without knowing what to do. Try smaller things first, then put those smaller things together to make a bigger thing.

Really? How strange. Do you actually use a class named "circles"? It doesn't appear to be the case. **The dangers of copy/paste coding** Always, always, always, young grasshopper, type your code.

It is so on...

Hey Bogdan, Perhaps this is about Tree Shaking in the production mode of Create React App, when it ejects all the code. Please see this and try creating a reference for the plugin to se if that helps, scroll a little bit and you'll see the tree shaking part): https://greensock.com/docs/NPMUsage Also normally when I hide stuff at runtime and then show them using GSAP (since there is no other way actually ) I use autoAlpha, which is a combination of visibility plus opacity, so I start with this in the CSS: .my-class { opacity: 0; visibility: hidden; } And then: TweenLite.set(myElement, { autoAlpha: 1 }); Give tree shaking a try and let us know how it goes. Happy Tweening!!

Yes, I turned it up to 11 and found myself in the upside down with Spinal Tap! I’ll play it safe. Thx dudes!

Sorry, I didn't realize you only wanted lines. I thought you were gonna animate the individual characters and/or words up from the lines. If you only want the lines, I'd probably split the text twice and set the outer div overflow to hidden. Maybe something like this. Does that help? Happy tweening.

You could break it with lines and chars (or words) and then set the overflow to hidden. Animate the chars (or words) instead of the line. Is that what you meant? Happy tweening.

I haven't had any trouble with the polyfill. https://github.com/w3c/IntersectionObserver/tree/master/polyfill I just ran this Internet Explorer with no issues. Well, I had to change like one line of code because IE doesn't support CSS vars. https://s.codepen.io/osublake/debug/6fd214ecd74e7091ec7b609bb0270f97

Hi @elegantseagulls, This works! Thank you very much for taking the time to help. The cube was definitely a good project to learn and I understand the draggable option a bit more now.

Did you check the demo I posted? It uses a custom function to get bounding box similar to getBoundingClientRect but with respect to svg co-ordinate system only.

Hi Beau, First thing I can say is that I don't like to add stuff to elements prototypes unless is necessary, but that is just me and my two cents about it. In your case I don't think is necessary, again just my humble opinion about it. Regarding your app I'd like to know if you want to animate all your elements or just some. If you want to animate all your elements, then the code you have is not working because you're not shuffling your array, you're simply getting a random index on each iteration, but at some point you could get the same index more than once. Normally when I have to do something like that I use this code: // this is the array const a = [101, 102, 103, 104, 105, 106, 107, 108, 109, 110]; const used = []; const getOne = arr => { let selected = Math.floor( Math.random() * arr.length ); // if the selected index is in the used array // try a new one until we get a non-used while( used.indexOf(selected) > -1 ) { selected = Math.floor( Math.random() * arr.length ); } // add the new index to the used array used.push(selected); return selected; }; a.forEach( () => { console.log( a[getOne(a)] ); }); That's the reason for this: Right now since some of the elements are getting selected twice or more, there are two or more tweens in the timeline that affect the same element, so GSAP is overwriting the first tween and then executing the second one, which creates the sensation of the element slowing down, when in fact the element just started a new tween, as long as the previous, but in a shorter distance. Creating an iteration that takes every element in the array only once would remove that issue. The rest of the code to create the random numbers seems ok with me. Finally in terms of React, avoid using string refs since they are considered legacy and will be removed from a future version. https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs Happy Tweening!!!

You're missing the src attribute. <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/TweenLite.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/plugins/TextPlugin.min.js"></script> Happy tweening.

You need TextPlugin to do that and need to target element instead of innerText.

Hi @Niek Roemahlewang I finally had time to look at the CodePen in more depth. The 'gotcha' for me was that the prev/next button tweens needed a fromTo tween to animate from current x position to the snapped x position. Hope this is helpful for your learning/understanding!

Happy to help. Be careful splitting the same element too many times. If you exceed 10 splits on the same element, you risk ripping a hole in the space time continuum and ending up in an alternate universe. Happy tweening.

That’s it! sorry I’m on the train without my laptop. But this looks great. I didnt realize you you could split more than once! my head just exploded! thx for this!

Thanks Sahil, that's great. My general JS knowledge isn't yet what I need it to be. Much appreciated.

Hi @jp_uk81, Check out this post:

Really, really helpful... as was your article on gsap & react: https://greensock.com/react thanks so much. I'll try to put it all together using ref callbacks & see if I don't break the internet with it. -B

It does exactly what is necessary to calculate the bounds. Nothing more. Nothing less. It is the same calculation that a canvas based library would use. It's not the preferred solution, nor is it needed in every situation. It's something I wrote to solve a particular problem. Feel free to use .getBoundingClientRect() if your SVG does not have a viewBox.

Hi Dipscom, Thanks for your reply again. Upon rolling over the link, the .circle(s) still dont go back to their original colour. I have updated the link I gave you with the code below. var navTL = new TimelineMax({paused: true, onComplete:clear}); $('.circle').hover(function() { TweenLite.to($(this), 0.2, {backgroundColor: "#f15a29", ease:Power2.easeOut}); }, function(){ TweenLite.to($(this), 0.2, {backgroundColor: "#232021", ease:Power2.easeOut}); }); function clear() { TweenMax.set('.circles', {clearProps:'backgroundColor'}); } Thanks again.

Without seeing your code, I can't fanthom what's going wrong. I don't even know if you are following my suggestion or if you are still working on the same code as your last listed Pen.

You will want to clear the props after the animation is reversed. Not before. Try something like: // wherever you create your timeline var navTL = new TimelineMax({onReverseComplete:clear}); function clear() { TweenMax.set('.circles', {clearProps:'backgroundColor'); }

getBoundingClientRect won't provide you accurate position inside the svg, it will only you position according to screen. Ya it is really well supported, just some browsers don't x and y properties but you can use left and top instead. Here is demo by @OSUblake showing how you can use getBBox using a custom function to get correct position inside svg. Similar thread if you wanna read more:

No problem, glad you solve it. Happy Tweening!!!

Yeah, I totally understand. This whole bundling-babel-ES2015+-webpack-loaders-plugins madness can make you wish to change your area of work some times, is quite a handful. This article from two years ago still reflects how convoluted some things have become: https://hackernoon.com/how-it-feels-to-learn-javascript-in-2016-d3a717dd577f

The first part inside the object is key and second part is value, so you need to use ternary operator in value part. .to("#square", 1, {backgroundColor: window.innerWidth > 736 ? "red" : "yellow" }); Also, by declaring timeline outside of function you were adding all tweens to same timeline even though you won't be reusing them.

Nobody uses frames, but it's a scalar, so you can easily convert your frame values to seconds. I wouldn't recommend creating something that nobody uses or understands. And if you're using PixiJS, a lot of filters require actual time based values, so frames won't be much of use.

One workaround is to pause the useFrames:true timeline, set globalSync:false on the GSDevTools instance, and specify that timeline as the animation like this: Then at least you can use the scrubber properly. As for your task of porting a frames-based animation in, there are a bunch of ways you could approach that actually (without useFrames:true). For example, build it as if 1 second = 1 frame (just to make the numbers easy) and then adjust the timeScale() to 30 to make it play at that rate. In other words, put all your animations in a timeline instance and alter the timeScale on that timeline. Or if you've got things that must jump in whole increments (like exactly 30 discrete steps rather than smooth interpolation), you could actually use the same technique as above, but then pause() the timeline and animate its time using a SteppedEase so that it's literally jumping at the proper increment across that timeline's progress. The nice thing about building it in the "normal" fashion (rather than useFrames:true) is that you get resolution-independence time-wise, meaning smooth interpolation that runs at the same speed no matter what device. With frames-based animations, if there's a slowdown during complex sequences and frames are dropped, that means EVERYTHING takes longer. So a 1-second animation might actually take 2 or 3 seconds (only if it's under a lot of stress of course). With time-based animations, they'll just jump to the appropriate spot and drop frames to keep up. Generally that's a good thing. There's tons of flexibility built into the system, so hopefully it's relatively easy for you to accomplish whatever you want. Let us know if you need anything else.

Sorry, but GSDevTools doesn't support useFrames:true animations. That feature is rarely used and will likely be removed in the next major release of GSAP in order to streamline things. I'm curious - what's helpful to you about useFrames:true? I always like to understand the value because perhaps we shouldn't drop it in the future. I almost never see anyone use that feature. Again, sorry about any confusion there.

I've really never looked at Udemy. Is that where you go to learn stuff? I don't think a lot of people know about the Intersection Observer. I've been using it mostly to show, hide, and lazy load stuff, but here's a fun animation for you. It looks better if you open it up on CodePen.

Hello, @Niek Roemahlewang Have you tried to take a look at this? https://greensock.com/docs/Utilities/Draggable/isThrowing

Hi @ainsley_clark, There are a lot of options. Here mine (using GreenSock TextPlugin) ... Happy tweening ... Mikel

In your demo, 800 pixels represents full size or a scale of 1. Every 100 pixels then represents 12.5% = 0.125. If your div was originally set to 1000 pixels wide and that's the point where you wanted to scale, you'd use 0.1 instead of 0.125 . You could easily set those up as variables so you wouldn't need to hard code them. The vertical scroll-bar remains because scaling that div is not affecting document flow. Off the top of my head, I'd say you could probably use two divs. An outer that floats and has its size specifically set by GSAP on a window resize event rather than scaling it. That would affect document flow. Then have the absolutely positioned inner div with the content do the scaling. Hopefully that makes sense.