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.

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.

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

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.

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;}

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 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.

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?

So it is on..??

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!

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

This is what happens when you tell CSS and JavaScript to animate the same thing.

It looks like the problem is that you've got CSS transitions applied. So every time GSAP changes a property, CSS transitions say "wait! don't do that yet...I'll take 2 seconds and animate those in". So GSAP was doing exactly what you told it to do, and the onComplete was firing appropriately...but your CSS transitions were taking another 2 seconds after that. See what I mean? I'd strongly recommend avoiding CSS transitions/animations if you're going to use GSAP to animate things.

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!!!

We built our site (and others) in React (https://www.elegantseagulls.com/), and haven't run into any performance issues. There are a lot of variables that go into performance, so without seeing the setup it's tough to give a clear yes or no.

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

Looks like there is some "scroll hijacking" going on there. Check out this link @Carl posted the other day. https://envato.com/blog/scroll-hijacking/ Related video...

Hi and welcome to the GreenSock forums, Thanks for the demo. Unfortunately this is going to require a bit of trigonometry in order to get the angle from the center of the svg to the element and then find a destination value to tween to. Its possible you could also find the angle to plug into our Physics2DPlugin. There are a few people that may consider this a fun challenge and have a solution for you, but we have to keep our official support much more focused on the GSAP API. Working with SVG coordinates is also a bit more troublesome than DOM elements. You may want to try posting this question on StackOverflow and not even mention that you are using GSAP. The animation will be fairly straightforward was you figure out the x/y coordinates you want to animate each element to.