Leaderboard

It will work if you animate cx attribute.

Guys, there's no need to fight! Meet in the middle and become BFFs with custom elements/web components. Vue can actually compile components into web components. https://custom-elements-everywhere.com/ Preact and Vue using a simple store. React currently can't pass props to an element ? Source for the animated icon. https://codepen.io/osublake/pen/42fcd8f6a6be8634c9fd261f811a3478

We're not assigning a function to the variable nor are we concerned about reversing the animation at this point. Think about what you're asking the function to do. You're asking it to create a timeline for one of the boxes and animate it to the new y position. But you only want a new timeline if certain conditions are met. That condition is "Hey, make me a new timeline only if my toggle variable is 'closed'. " How can we check that variable and only create a new timeline if it's "closed"? Note: We could use the isActive() method here, but I'm showing you how to do it with a variable because we might need both depending on your final needs. I'm using "closed" because your image cover is either closed or open. You could use true/false, 0/1, 'apple'/'banana'. It doesn't really matter.

So, it turns out that the “problem” is that I am idiot. The getElementById selector was working fine all along. The target element was assigned an id inside a component that was rendered several times. I was experimenting with the last instance of the element on the page, never realizing that the element in the first instance of the component, which was scrolled out of view, was animating just fine. getElementById was grabbing the first element with the shared id, and calling it a day. My solution is to implement dynamic id’s, or maybe dynamic data attributes, and select the elements by those. It was your suggestion that I duplicate the "problem in codepen that led to me discovering the issue. Thanks !!!

I re-wrote the demo. I would say avoid assigning class to keep track of active elements, it gets messy and confusing real quick.

To add external scripts to the playground, click on Settings > External Scripts. But it works fine on CodePen. Just fork this.

Hi guys, Just a little help. Guaranteed letter by letter hand coded by an old grasshopper. Happy scrolling ... Mikel

Just to simplify, all I'd like you to do at this point is this: // wrap these two lines in some logic so they only fire if the toggle variable is "closed" anim = new TimelineMax(); anim.to(targets[this.index], 1, { y: -50 }); There are only a few steps to the complete solution you need for your project and this is step one. Going slowly will help you understand everything as we go.

@OSUblake, components... really??, that's your answer to everything, right??

Your issue is still the same. You still have two separate event listeners with their separate functions doing separate things. And you are still not controlling the state in your jQuery function. I know it will look like I am being mean on purpose but I am not. I really, honestly am not. I am trying to point out the basics you seem to be missing in your knowledge. I will circle back to a question that I have asked you before: - And have also the given asnwer: Again, you need to understand what is happening here. Otherwise you will continue to need others to write code for you. Finally, as a mercy, here's another hint. Your newTarget cannot be the same as your oldTarget when you click on the button.

Sorry, I'm not really understanding this. It would be of great help if you could create a reduced test case in CodePen as explained here: Leave out ScrollMagic and any related code entirely. Its important to understand first whether or not GSAP is behaving as it should on its own. Thanks!

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.

I'm so busted! But I've been talking about custom elements/web components long before I became a conspirator. Like here. Maybe, but I think @Rodrigo already hit on the main point. Use shared state to control animations in other components. For Vue, vuex is a popular way to manage state. https://vuex.vuejs.org/

I won't write it for you, but I'll help you. Look at this demo. Right now you can click the 1, 2, 3 buttons to create a timeline and animate the 1, 2, 3 box. Can you think of a way to use the toggle variable on line 6 to write some logic for the doCoolStuff() function that will prevent additional clicks once a timeline is active?

Yep, I think that was the rant I saw that made me think that. Also, I have seen Paul Lewis video when it came out. But, but, but, isn't he a Google employee? He's part of the conspiracy. HAVEN'T YOU DONE SOME WORK FOR GOOGLE?!?!?!?!? You're one of them! SHOCK! HORROR! Bet you're hacking into my machine now to erase me and put a bot in my place! ...and off we go hijacking another perfectly normal thread...

I'm pretty sure that code won't work on most phones. Phones typically don't have a mouse wheel. And mousewheel and DOMMouseScroll are non-standard events. You should probably use wheel instead. Of course that still won't work for mobile.

I'm still not seeing an image open a second time. I also see that I'm able to click an image button during the opening animation and while the image is open which causes it to close immediately. I can also click either of the two inactive buttons while they fade out and that too causes problems. I asked about the user being forced to close an active image because it's actually a bit easier to code under those circumstances. If that active timeline must reverse completely before a new button is clicked, do you really need to create a new timeline to close it? Or does GSAP have a way to reverse that active timeline? https://greensock.com/docs/TimelineMax/reverse() Preventing clicks while a timeline is active. https://greensock.com/docs/TimelineMax/isActive()

In your actual project you have three buttons and three images, right? Will the user be forced to use the back button to close the active image before being allowed to click another image button?

@flowen There are components you're importing into the sample that are not present in the folder structure of your sample: import Title from './Title' import Description from './Description' import NameDrawn from './NameDrawn' import Sun from './Sun' Stackblitz is returning an error during compiling: Import error, can't find files: ./Title ./Description ./NameDrawn ./Sun Please add those components and also the logs in order to see what's happening.

I forgot to mention: @Rodrigo, your suggestion to trigger animations based on shared state has me thinking in a whole new direction. Thank you for expanding my perspective! And, @Dipscom, for the record, I thought the friendly rivalry was very entertaining.

Hey everyone. ? Thanks so much for all your help. I am a little overwhelmed (to be honest). @mikel, @Sahil and @Dipscom, I'm still working through your posts and suggestions. @OSUblake I'm also going to checkout three.js (but it looks a bit intimidating at first glance). Thanks so much for all your help. I am extremely grateful for all your help and support. ?

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

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.

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.

Hi guys, I hope we did not scare AnnaMarie now ...

Howdy @flowen. Please follow @Rodrigo's advice and also we'd appreciate it if you didn't post the members-only plugins in public github repos because that makes it super easy for people to steal without getting the proper membership/license. Thanks a bunch! You can use the special trial versions of the bonus plugins listed here: https://codepen.io/GreenSock/full/OPqpRJ/ and they'll work on stackblitz.com too. Happy tweening!

something like this? toggle = function(){ if(!anim.isActive()){ anim.reversed(!anim.reversed()) } }

There is blog post saying netlify supports gitlab.

So you need to control each individual tween separately? They don't all animate at the same time to the same values? If that's the case, then you'd need a tween instance for each. Otherwise, just use a single tween and feed an array in as the target. And I don't see any reason to create all the tweens at once - you can just create them when you need them to run. Also, you can cache a single instance of Elastic.easeOut.config(1.2, 0.2) instead of calling that method again and again for each one. Config once, and reuse for all the tweens. invalidate() just erases any starting values that were recorded internally, forcing it to re-analyze/record the starting values on the next render. I'd strongly recommend against directly accessing any "_" prefixed properties like _duration because those are for internal use only. The proper way to set those is through the getter/setter, like tween.duration(newDuration). Like @Dipscom said, though, it's very unlikely that any performance problems are related to GSAP directly - it's typically something in the rendering pipeline that's the culprit. If you still need help, it'd be great if you could create a reduced test case in codepen that demonstrates the issue. It's just very difficult to troubleshoot blind (or just glance at an excerpt of the code). Happy tweening!

Guys, I appreciate your helping me figure this out! I am working on capturing the issue in a simple codepen. Will post when I have it done. In the meantime, enjoy sniping at each other.

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.

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

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.

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

Given the context of the bug you are hunting and the user behaviour you are mocking, what is this specific line of code inside doCoolStuff doing? if (newTarget === oldTarget) {return;}

Right... I see. Well, let me try to walk you here from being stumped towards your bug into freedom. When you click on the button. What are you telling your program to do? I see two events being triggered: 1) doCoolStuff() is being called from the event listener that's added in line 14 of your code. 2) An anonymous function being called from one of your jQuery handlers on lines 101, 107, 113 and 121. Now, ask yourself, do you understand what's going on inside the doCoolStuff function? And equally important do you understand what is going on inside your anonymous functions being independently triggered via your jQuery call?

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.

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.

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.

Hey everyone I have another SVG quick tip for your text elements. If you need it to slice, explode, shatter or glitch, you may find this useful. I was recently working on a Halloween animation for a client and we needed to slash some SVG text into pieces. My first instinct was to convert the text to paths and slice it up in in AI, but this text needed to be dynamic so that would be a lot of work. I decided to place the text in a pattern element and create a group of polygons filled with that pattern. That allowed me to create the slashed pieces of text (the polys) and have them fall away. The text is easily changeable with the GSAP text plugin. It proved to be an easy and flexible solution Happy Hallowtween.

Hey fellow GreenSockers, I just wanted to give a big thanks and shout-out to Jack for creating and maintaining the amazing GSAP for us. I know he likes to thank the moderators for volunteering our time in the forum, but we need to send that thank you and positive energy back to the top too. I can’t imagine how I would accomplish my web animations without GSAP. Most of this stuff would be super difficult with plain JS and virtually impossible with **shudder** CSS animations. To illustrate my point, here’s the shameless self-promotion part. My recent demo (4 smashed into one actually) included a rolling square on one menu. As I was working on it, I wondered how I would even roll a square without smoothOrigin? If you could somehow make it work, it wouldn’t be easy. And that feature is just baked into the cake with GSAP! It’s crazy how much use I get out of the DrawSVG plugin too. No getTotalLength() browser inconsistencies. I just calculate some percentages, drop in a couple tweens and I’m done. With the core tools and amazing plugins, how can anyone look at this platform and not immediately join Club GreenSock? It’s astounding how much faster and easier the work is with GSAP. Not to mention that it’s so much fun. The web truly is a more interesting (& animated) place because of GreenSock. Thanks for being awesome Jack!

GSAP has quite literally changed my life (for the better). Thanks @GreenSock! Awesome post, @PointC!

Really nice work on the latest demo, @PointC! Nice touch with the little viewBox toggles & color themes. And of course a big "thanks" for the kind post. You made my week. ?

Hi, like this ... Happy tweening ... Mikel

I didn't read through all your code, but I assume this is what you wanted, right?: Happy tweening!

Yeah, I can totally see why you'd think this is a bug and I suppose it sort of is, but one could argue that it's a bug when it DOES work As @OSUblake said, you're doing something very unusual here in that you're animating completely different types of objects, but remember that technically in order to animate CSS properties you've got to define them in a "css:{}" object so that CSSPlugin takes control of those. However, there's an "autoCSS" feature that senses when the target is a DOM element and then it automatically creates and wraps those "css:{}" values for you (to minimize typing...it's a convenience, as it's so incredibly popular to animate CSS on DOM elements). In your demo, if you had the plain object AFTER a DOM element, what was happening is that GSAP noticed the DOM element and pushed the "x" value into a "css:{}" object as a convenience, so your vars looked like this: {css:{x:200}} Thus by the time it go to the standard object it was trying to animate CSS properties of a plain object (doesn't make sense). Of course a solution for us would be to never edit the original vars object (create a copy for each and every target), but GSAP is HYPER optimized for speed an minimal memory consumption, so that was a design decision we made. A solution would be to keep your arrays homogenous (don't mix plain objects with selector text or DOM elements), or you could technically define BOTH values x: and css:{x:} like this: TweenMax.fromTo([ this.$refs.circle, this.$refs.triangle, this.$data ], 1, { x: 0, css:{x:0} }, { x: 200, css:{x:200} }); But that seems a bit odd to me readability-wise. My personal preference would be to use a different tween for the generic object. Does that help?

I got the same result using vanilla JS, but I don't know if it is a bug. @GreenSock will have to verify that one. I wouldn't expect it to work because you're trying to animate objects with different types in the same tween. Elements will use the CSSPlugin to set x, while a regular JavaScript object doesn't need any plugins. I've accidentally done that a few times in the past, and I've learned that it's best not to mix different object types.

Hi, as @elegantseagulls mentions, performance in React is tied to the React side of the code and not how you create your GSAP animations. Resource demanding animations will create performance bottlenecks in Wordpress, Joomla, React, Angular, Vue, etc. same thing on the other side of the coin, a React app with poor performance does not depends on the animation side of it, regardless of the tool you use for that. The mantra around here is: test, test, test and then test again. So just jump into it and create your app and see how it goes. If you run into some issues, post back and we'll help you through. Happy Tweening!!!

I assume you meant something like this, right?: Happy tweening

Using a little vector math, this is actually pretty easy to do. All you need to do is scale a vector. It's too bad JavaScript can't do operator overloading like a lot of other languages, because this could be a one-liner. var newPoint = (point - center) * scalar; Vectors are like points, but they have a definite direction and length, so the ratio between the x and y values is constant. This means you don't have to figure out the angle for a position. If you know the length of the x or y axis, you can figure out the other axis by multiplying it by a ratio/scale. If you've ever calculated an aspect-ratio for an element, like during a screen resize, it's the same concept. You can see how it works in this demo. As an element moves away from the center, the rate of change between the x and y axis remains constant. So to pull this effect off, all you have to do is multiply the difference between an element and the center by some scalar value. Check it out. It creates a pretty cool effect. It's pretty uniform right now, but you could add some randomization to it. Changing the stagger value can dramatically change how the explosion looks.