Leaderboard

The secret sauce... Wave === Sine.easeInOut

About the same amount of code, but in 3d.

Yup, like Dipscom mentioned, you already have 1 row, so building another would just require using a loop. My suggestion would be to create a buildRow() function that adds a new row of balls to the dom. Call that function a bunch of times for more rows. I would also create a new timeline to animate each row. I did a rough implementation of this setup in the demo below. Each row uses the same animation parameters. you will most likely have to do considerable calculations to make each row animate differently if you want to replicate the effect in the Three.js demo you have been referencing in multiple threads. Unfortunately that isn't the type of thing I have the time, or perhaps even the ability, to do for you.

Ohhhh Science! I likes science! If you're not on a horrendous deadline I'd be happy to help you work your way around what you need to do to accomplish this if you'd want to. No strings attached, just for the fun of it. The only caveat is that it would be on a drip-drip basis as I'm still a bit overwhelmed with other stuff that needs doing. Ping me a private message if you fancy.

Hello @OxXxigen and Welcome to the GreenSock Forum! Also adding to all the great advice here If you want to prevent that you can also use transform-style: preserve-3d when you use perspective with zero rotation, to prevent the browser from switching it to flat. https://developer.mozilla.org/en-US/docs/Web/CSS/transform-style Just my two cents

You seem to be right about it, 1. Setting small rotationX works as expected. 2. Setting transform perspective from GSAP without rotationX doesn't work as expected. 3. Setting perspective in CSS works as expected. You need to set perspective not transformPerspective. Even I got fooled by your demo. You are confusing transformOrigin and perspective.

thanks for the demo. yes, the same thing would happen in real life if you took a very thick book and put it directly in front of your face. It would appear as a rectangle with no depth. Is there a different result you are expecting? I'm not sure if you had a question or what you need help with.

Usually its best to just create your timeline outside of your hover event handlers, and just play on hover in (mouseenter) and reverse the timeline on hover out (mouseleave). Below are examples of playing and reversing a timeline when hovering so you don't have to create multiple timelines on each hover. This way you create one timeline and just simply play and reverse the timeline animation. Adding a timelines to multiple elements Happy tweening!

You can do that using MorphSVGPlugin. It is part of club membership but on codepen you can use it for free to practice. Very easy if you are familiar with SVG. https://greensock.com/docs/Plugins/MorphSVGPlugin

Just want to say I'm really touched how helpful you guys are on this forum. Cheers! ?

Hi and welcome to the GreenSock forums. Unfortunately, as far as I know, GSAP can't be used in React Native, due to the way RN actually works. Keep in mind that RN works in a different way than Cordova, PhoneGap and other tools. What I know is that RN uses the Animated API, which jumps directly on the native way for creating animatios. GSAP uses the browser's requestAnimationFrame event to create the animations. Now take this with a grain of salt, because my knowledge lays on the web side of React and not in RN. Although I made a google search for RN animations with JS libraries and there weren't a lot of results. Perhaps you could try going to Reactiflux and go into their discord channel and ask around for animations using an external framework: https://www.reactiflux.com/ Sorry that I can't be more helpful, but it seems that for the foreseeable future just the existent APIs are the ones you'll have to work with. Other options involve using C, JAVA or Swift, like Flutter. Then there's Lottie that allows to export After Effects animations but that's a completely different scenario. Happy Tweening!!!

Oops. Forgot to change the js. Sorry about that. Thanks for the quick response. You guys are awesome!

TweenMax internally uses for loop instead of forEach that's why it performs far better. A bit less convenient but far better for performance. https://stackoverflow.com/questions/43031988/javascript-efficiency-for-vs-foreach

Have you tried setting progress as in following demo? If your timeline doesn't change then you can just change the progress. If animation is simple you can use invalidate method. If invalidate isn't enough then you can keep track of progress, and reconstruct entire timeline and set the progress to it. Though avoid using heavy calculations for scroll based effects, it will start getting janky soon.

On line 237 you are setting time to zero which causes animation to complete and your blocks end up in end position. If you uncomment that you will notice it continues animating. Though please avoid posting such demos with 100+ lines as it takes a lot of time to go through unfamiliar code to figure out what is going on and what is suppose to happen. Also, I edited your question because other users can't see your demo when you are posting links in 'full page' mode. I had changed it to 'editor mode' but you seem to have undo it again.

That's the expected behavior. Zero duration tweens, set(), from() and fromTo() tweens will fire immediately. I think you can fix that by adding immediateRender to false. Please try this on line 26. .to('.scene.two', 0, {display: 'flex', immediateRender:false, onComplete: function() { Zero duration tweens are a bit tricky so I'd recommend using the convenience method of set() for that tween instead of the way you have it now. It's essentially a zero duration tween. More info: https://greensock.com/docs/TweenMax/static.set() Happy tweening.

Sorry, I'm a bit lost here. I'm not that familiar with the ways the exact ways that browsers interpret and calculate perspective vs transform-origin. My suggestion would be to build your cube using pure css and get it to render the way you want. If you have trouble animating it, let us know. We really have to keep our support focused on the GSAP API and this seems to be more of a question relating to CSS.

Look at your code, line 9: for (i=0; i<total; i++){ Do you understand what this is doing? All you need to do is nest another loop, similar to this for each row that you want to create. As PointC has mentioned before, this is a more general JavaScript question that you are asking, we do try and stay as focused in GSAP as possible here or we won't be able to help as many people as we could otherwise.

Hi @PointC, Great job. Thanks! https://redmax.hamburg/MANsolved/ The .nav was fixed too, but that only happened after the 1st scrollTo started. if($(window).width() >=600 ){ $(window).scroll(function(e) { var scroll = $(window).scrollTop(); if (scroll > offset_Wert-nav-30) { TweenLite.to('.nav',0.5,{autoAlpha:1, position:"fixed"}) }else{ TweenLite.to('.nav',0.5,{autoAlpha:0}) } }); } else if ($(window).width() <600 ){ TweenLite.to('.nav',0.5,{autoAlpha:1, position:"fixed"}) TweenLite.set('#section1',{marginTop:'75px'}) } Best regards Mikel

I think you asked the same question over here: You didn't respond in that thread so I'll ask again here: Are you looking for someone to build that for you? If so, you may want to look at the new Jobs section of the forum here: https://greensock.com/forums/forum/15-jobs-freelance/ We do have to keep the assistance here to GSAP related problems and questions and this appears to be more about three.js. If you have a demo started and some sort of problem/question related to GSAP, we're happy to help. Happy tweening.

Sorry, I thought we were looking at the harsh jump so I thought the <a> tags were the problem. I think the wrong position on first click is because of the 'fixed' setting on the .nav. In your CodePen demo you have the .nav set to position:fixed in your CSS. As far as I can tell on your live site, the .nav is set to relative in your CSS. It tweens to position: fixed upon the first window scroll and stays that way so all subsequent clicks and scrolls are landing correctly. I think by setting that .nav to position:fixed in your CSS, it should fix your issue.

Hi Gilbert and welcome to the GreenSock forums. First try to avoid string refs, they are deprecated since React 15.x. Use the ref callback instead: https://reactjs.org/docs/refs-and-the-dom.html In the constructor create an empty array to add the elements as you call the render title method: // this is inside the component's class constructor(){ super(); // just an empty array, we'll use the ref callback to add the DOM elements this.titles = []; // the rest of your constructor code here } Then, IMHO I don't see the need for two methods to render each title, you can run all your logic in just one and use the ref callback to add the element to the array, like that you'll have a predictable way to add your elements to the timeline. renderTitle(e) { const ATitle = titles[e.component]; return( <div className="box" key={e.component} ref={e => this.titles.push(e)} > <ATitle size={e.size} text1={e.title} text2={e.subTitle} open="false" style={{ position: "absolute", x: " +e.x+" , y: " +e.x+", "fill": "orange" }} onComplete={this.handleComplete} /> </div> ) } The key is the ref callback which has the DOM node as the argument, then the DOM node is added to the titles array. Then you can access the titles array and create your timeline: componentDidMount(){ const { tl, titles } = this; titles.forEach( (e,i) => { tl.to( this.refs[e.component], 1, {x: e.size, y: e.size/3 , scale: 0.5, opacity: 0.5}, .5 * i ); }); tl.reverse(); } This is a better and more actual approach to write your app. Now to the sequencing part of your app. I'm a bit puzzled, because react-titles does creates either a GSAP instance or uses react-motion for the animations. If you want to control those animations, you'll have to fork the repo and create an API that exposes some way to do what you need, because react-titles starts as soon as the component is mounted. For the initial position, what I saw in the repo is that the code uses fromTo instances, which create an immediate render, which sets the initial position of the elements being animated, so no matter what you do react-title will enforce those initial values passed in the props of the component's instance. Such is the nature of re-usable React components, you have to work with whatever the creator of the component is giving you. Also keep in mind that the open prop passed to the component is a boolean and you're passing a string "false". Try using a boolean instead: <ATitle size={e.size} text1={e.title} text2={e.subTitle} open={false} style={{ position: "absolute", x: " +e.x+" , y: " +e.x+", "fill": "orange" }} onComplete={this.handleComplete} /> Another option is hack into the code of react-titles and create a way to control the animations. Honestly if I was you, I'd take the animations being created by react-titles and bake my own solution for the particular needs of the project. The GSAP code in react-titles is good and there are no issues there and unfortunately we can't spend a lot of time figuring out how GSAP based tools work and how they're used. I saw that you started an issue in the repo, hopefully the creator(s) of the tool can help you more than I can and they can add a way to keep the tweens paused when mounting and give more control over them, as well as creating more complex sequences. Happy Tweening!!!

You were using really old version of TweenMax. Current version is 2.0.1

Hi @sheila Welcome to the forum. You can certainly animate a path as a mask. There is no 'r' attribute for a path though. That's the radius of the circle. You could morph it to a different shape, scale or rotate it no problem. Here's a fork of your demo with a scale animation. Does that help? Happy tweening.

[facepalm] I should've thought of that—clearly I didn't have enough coffee before posting. Thanks!

using perspective on the container you can offset the position of your cube relative to the "virtual camera" so you can see the sides of the cube.

I forgot to do the hard sale on this line. Yeh man, GSAP is da bomb. Is a better option for a better world! It's performant, efficient, clean, renewable and GREEN - therefore recyclable! The world should be using more GSAP, we all need to support all GREEN and renewable initiatives in the world.

Thanks a ton for trying to help, Dipscom! Chiho, I'm noticing multiple threads by you related to a world of balls and it is becoming very difficult to make sense of them all. Please try to keep the conversation in one thread. This one seems best:

Eh? You've edited your question without responding to my comment. In any case, my comments still relevant. If anything, it's more relevant now that you have added even more code in. Try to understand what it is that you have written in your code, what each line is doing because as is, your little red balls are animating and scaling down. You can't see it because you wave animation is going up and outside the viewport. Ultimately, your issue here is only spaghetti code (confused code) nothing else.

The best part of that article is the really cool SVG Wars: May the Morph Be With You demo.

Yeah, I'm having a really tough time understanding exactly what you want to have happen and why your code is structured the way that it is (I'm not criticizing - I'm just unclear). It looks like you're creating a "tl" timeline that handles the oscillation, but then you pause that and have a endFrameAnimation() function basically recreating the same type of movement that takes over, but then you're trying to control "tl" (the one that got paused and whose movement got hijacked by the endFrameAnimation()). And you still had that error from before regarding where you declare your variable. I have no idea if this is the effect you're looking for: And I'd definitely echo @mikel's recommendation to read that CSS-Tricks article. I suspect you could create the effect you're after with a lot less code (but again, I don't quite know what you're trying to do, so I could be wrong).

Hi @Daanliberta, Welcome to the GreenSock Forums. Here is an example: Maybe it will help ... Happy tweening. Mikel

Hi @mic1991, Welcome to the GreenSock Forum. Is not easy to understand what the process should be. My tip ... take a look at this page: writing-smarter-animation-code Just a little starter: Happy tweening Mikel

First of all, welcome to the forums, @mic1991! I think the problem has to do with variable scope. When you create a variable with the "var" keyword inside a function, it ONLY exists inside that function. Nothing outside of that function can see it (that's just a JavaScript thing...well, most languages...I just mean it has nothing to do with GSAP). This happened with your click_tl variable. So... function test() { var tl = new TimelineLite(); // ... } test(); console.log(tl); //undefined! "tl" was created inside the test() function as a local variable. If you need to reference that variable elsewhere, you should declare it in the parent scope (not inside the function), like: var tl; function test() { tl = new TimelineLite(); //... } test(); console.log(tl); //works! Does that help? If you declare your click_tl variable at the top of the document (not in the function), I believe you'll get what you were looking for. (unless I misunderstood your goal)

The word React is like the Bat-Signal for @Rodrigo. If we need him, perhaps we just fire up the Rodrigo-React-Signal.

Ah many thanks for the help, I wasn't aware of those methods thanks for highlighting them. I accomplished this in the end by animating an object and updating the object's values using UpdateTo. (Scroll while animating to see values update)

Hi chiho! You seem to have a bit of unnecessary code in your example. Some of it will cause issues for you. Are you aware of all that this code of yours is doing? An example of unnecessary code is TweenLite.set("#header") // This not only is doing nothing but it might cause something to misbehave at some point You also have a "R" function that are not being used. Do you need it? As for rotating your lines, a simple way would be to create a container to each line, add your balls to it and rotate said container. Just like you add the balls to the "#header" div, you could create a ".line" div.

I might be looking at the wrong thing, but it seems like you've got <a> tags with href attributes pointing to anchors which the browser will make immediately jump there. Have you tried removing those?

You really can't control garbage collection - the browser decides when it's best to run a sweep (based on a lot of factors). Glad you found the article helpful! Yeah, I think it's one of those "must-reads" for anyone who does even moderately complex animations. Happy tweening!

@PointC beat me to it - he's exactly right. But when I re-read your question, it wasn't entirely clear to me if you were wanting to ease the whole thing or if you simply wanted to change the timeScale() to speed things up or slow them down (overall). If the latter, it should be as simple as: yourTimeline.timeScale(0.5); //play at half speed As for your 2nd question, you're correct - TweenMax.staggerTo() returns an array of tweens, so if you want to control them all as a whole (to ease/tween them), you'd need to tuck them into a TimelineLite or TimelineMax. It'd be cleaner to just create the timeline and use its staggerTo() method directly, but you can also add() the array from the TweenMax.staggerTo() if you prefer (not sure why you would though) Happy tweening!

Typically it's fine to create a lot of timelines because [unless you're maintaining a reference somewhere in your code] they automatically become eligible for garbage collection when they complete. It's not like they stack up forever. I'd strongly recommend reading this article: https://css-tricks.com/writing-smarter-animation-code/

THANKS YOU VERRY MUCH ❤️❤️❤️

You have a typo with an uppercase 'T' //switch this TweenMax.To(".logo", 2, {width:400}); //to this TweenMax.to(".logo", 2, {width:400});

That will be because you're probably missing the CSSPlugin... Have another look at the thread, the details are explained there. Or, just use TweenMax instead of TweenLite, you'll probably be better off with TweenMax anyway. Do let us know if you have having language issues, though. Such is the fate of the unworthy... ?

Well... aren't you a big box of surprises!!!

Hello @jiggy1965 and Welcome to the GreenSock forum! You might be dealing with an event bubbling issue. You could try and use mouseenter instead of mouseover, and use mouseleave instead of mouseout. Mouseneter and mouseleave do not allow event bubbling like mouseover and mouseout, so that can help with the multiple event firing your seeing. Event mouseenter: https://developer.mozilla.org/en-US/docs/Web/Events/mouseenter Event mouseleave: https://developer.mozilla.org/en-US/docs/Web/Events/mouseleave Event Bubbling: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture jQuery mouseenter(): https://api.jquery.com/mouseenter/ jQuery mouseleave(): https://api.jquery.com/mouseleave/ But to better help you, can you please create a limited codepen demo example. This way we can see your code live and in action to test. Thanks Happy Tweening!

CodePen is a haven for that sort of examples. You can find anything you can think of and a bunch of other stuff you didn't even think yourself. Here's a quick search result: https://codepen.io/search/pens?q=scroll reveal&amp;page=1&amp;order=popularity&amp;depth=everything&amp;show_forks=false Disclaimer: We don't work for CodePen, we don't get commission from them. They're just a bunch of super nice developers who created a lovely comunity and a great product. Sounds very much like GSAP, you say? :D

Sure... myTimeline.eventCallback("onComplete", yourFunction); https://greensock.com/docs/TimelineLite/eventCallback() Is that what you're looking for?

Welcome to the forums, @lucrampro. GSAP is a full-fledged, robust animation library that can animate pretty much any property of any object. It's not a canned solution that creates a specific effect like the one you referenced, but it can certainly do things like that. Unfortunately we don't have the time/resources to study the effects in a whole live site and provide tutorials for recreating them, but if you have a specific GSAP-related question we'd be happy to help. If you're just getting started with GSAP, I'd recommend https://greensock.com/get-started-js/ and of course the docs would help too. And https://greensock.com/learning/ Happy tweening!

Hi and welcome to the GreenSock forums. It looks like you aren’t loading SpilText. SplitText is a bonus plugin for Club GreenSock members. http://www.greensock.com/club you can try SplitText and all bonus plugins for free on CodePen https://greensock.com/try-plugins Let us know if you need any more help