Leaderboard

Is this what you are trying to do? I changed how you were creating your tweens because you can use staggerTo tween to do same thing instead.

Here is something a little more fleshed out with moving divs rather than backgrounds ...

Hi @JordanM Welcome to the forum. That little jump seems to come from the scroller container being set to 100vh, but the body currently has the default margins. If you set body margins and padding to 0, I think you'll see a smoother start. More concise tweens? You don't need to use the add() method. You can write it like this: rocketTween.from("#parallaxContainer #bg", 1, {backgroundPosition:"0 100%", ease: Linear.easeNone}); You're using the same ease for all tweens so you could also set a new default Then you don't have to add it to each tween on the timeline. TweenLite.defaultEase = Linear.easeNone; I didn't see your click function in your demo, but you wouldn't need all the if/else statements. One easy approach would be adding a data attribute to each of those buttons and feed that into your page scroll function. Here's a basic example I made as an answer to another forum question, but it should give you a starting point. Hopefully that helps. Happy tweening.

For what it's worth ... ScrollMagic is a bit unnecessary here (unless the CodePen isn't displaying the entirety of the project). This could be handled with a simple paused timeline where the current scroll position progresses the Timeline. Also, using some X positions rather than "left" could help. Lastly, I'm a fan of using background images on divs and moving the divs (using X/Y) rather than moving the backgrounds because of the hardware acceleration. Here is a quick codepen taking ScrollMagic out of the equation and using the users scroll position to progress a Timeline. I didn't spend to much time on making sure the timings match up, but it should give you the idea.

Hi @TomWWD You can add an infinitely repeating tween to a timeline and the next tween will go after the infinite tween finishes its first iteration. You do have to be using TweenMax 1.20.0 or later. Your demo is currently using 1.18.2 which is over 2 years old. More info here: If you need to control that particular infinite tween separately from the main timeline, you could also create a tween or timeline for that repeating animation too. It would make it easier to control. Hopefully that helps. Happy tweening.

Hi @pcdavis I'm not a React user so I can't be of any help in that department, but I can answer your morph group question. The MorphSVG plugin works path to path so you can't just add a group to the tween, but it's fairly easy to accomplish with a loop. The trick is just making sure you artwork is in the right sequence to loop through and perform the morph. Here's a basic example: In my example, I've added a number to each path name. By doing that, I find it easier to see if I've made any mistakes, but it's not necessary. If your start and end paths are in the same sequence in their respective groups, it should be as easy as selecting the elements and creating morphs based on the index of the loop. In your case, you have a little extra work to do with the eyebrows. They aren't present on the happy face so you'd have to create a scale or drawSVG tween for them when you morph the mouth and eyes from happy to sad. Hopefully that helps. Happy tweening.

If it were me, I'd probably name that infinite tween so you can easily control it later. Then add it to the main timeline. Maybe something like this. You could also put that infinite animation in a function and call it after any of the tweens on the main timeline. As with all things GreenSock, there are many roads to the goal. Hopefully that helps. Happy tweening.

Awesome! Thanks!

Just made your sky container's position fixed. Changed easing on mickys to Power1.easeInOut because you are animating elements for long time to short distance so it was looking stuttering. With easeInOut animation will be fast at start and end so you won't notice stuttering a lot. Changed your tweens to staggerTo tween. And commented out anything that wasn't important. And added new div tag for content.

1. Ya x and y translates work better than left and top. When you animate left or top property it causes layout recalculation. x and y translate take advantage of GPU and doesn't cause layout trigger so they perform better. 2. Span tags are inline by default and css transforms don't work on inline elements, if you set your span tag's display as inline-block then it will work. 3. Ya game developers use that trick but if you visit some of the websites from examples page, you will rarely find someone doing that. Generally if your animation isn't performing at 60fps on PC or on even some high end mobiles then you are doing something wrong or asking browser to do too much work. https://csstriggers.com/ You can optimize performance by avoiding triggers wherever possible. Avoid animating too many elements and use canvas to animate. Avoid creating too many tweens on movemove, scroll events by using requestAnimationFrame, so your calculations will happen only once per frame. Start measuring performance of your work from start, on mobile and by using chrome's CPU throttling. So you will have idea about how much more you can do on the page and keep performance better. Also about setting animation to 30FPS, if your animation drops around 30-45FPS on PC it will drop below 30 on mobiles, so optimizing has to be your first step. You can search through the forum for discussions on performance, recently we are getting a lot of questions on performance.

I didn't mean it does what scroll majic does as far as triggering and such, just that what it does in this usage case replaces the need for it which is great, I've been wondering for a while about how to apply gsap to parallax effects without needing Scroll Majic and pins but never got around to figuring out how to implement it. Simple as it may be your function can do a lot especially if you add some input parameters and additional logic to fine tune control. So gold badge it is.

You can do somethings to optimize for mobile hardware ... in particular, you can use `x/y` rather than `top/left` since x/y equates to CSS hardware accelerated transforms. Getting the GPU involved usually results in dramatic improvement. Also Tweening the `scale` vs the `height` would be hardware accelerated, so you might see a boost there. It's hard to say what exactly is bogging it down because I can't get the page to load with the given URL ... it stops in the mid 90s for me (generally around 95%).

If someone is using IE, this is how you respond.

Here's another example. Corners can be a little tricky, so I give them a little wiggle room.

You can do that using a liveSnap function. Check out how you can use it with points. https://greensock.com/1-20-0 @GreenSock This demo is broke. Need to add a comma after the type.

Dang, quick reply! Love it! Thanks so much, looks like that's my issue

No I haven't heard of any other library than PixiJS, GSAP has plugin for it as well. It seems best option for 2d animations on canvas. Forgot to point out, you see staircase effect because you are using Elastic ease.

@Visual-Q Glad I could help in that area!

I appreciate the kind words, but this is far from replacing a framework! In this situation it seems to work well (a tween's progress that is essentially tied to the scroll position). ScrollMagic is absolutely wonderful (and IMHO virtually necessary!) when specific tweens need to fire at very specific scroll points.

Gold badge for Shaun, he eliminated the need for an entire framework with one function: $(window).scroll( function(){ var curScroll = $(window).scrollTop(); if( curScroll > 0 ){ rocketTween.progress( curScroll/scrollMax ); } })

The Oracle of CSS is dropping knowledge.

Awesome! That's exactly what I was looking for. Thanks, Blake!

I don't know if there is a reason to avoid them. From a styling point of view they're safe to use because CSS just skips stuff it doesn't understand. .foo { background-color: green; // fallback background-color: var(--myColor); } IE is the only browser that doesn't support them, so the animation won't work, but it won't throw an error. But I would just disable all the animations in IE. Don't worry, your client won't check.

Such an old but good thread. I really should make a new version of that slider. Look at how I'm changing the positioning in the setAbsolute/setRelative functions here.

Sort of new, but a variable in preprocessor doesn't work the same way because they are static and cannot be changed at runtime. https://greensock.com/css-variables And if you want to see the future, fire up Chrome and check out these experiments. Chrome needs to be version 65 or higher. https://lab.iamvdo.me/houdini/background-properties

Why are there two declarations for .green-state and .red-state in your CSS? Why does a box with both .red-state and .green-state become red, not green? I mean, I understand the CSS, but isn't is it way less intuitive to do it that way? If I want a box to go from green, to red, to blue, to yellow, to purple... would I have to write 5 nested classes? Just wondering if I missed something (Also, I feel like there's a lot of unneeded aggressiveness in this thread – could use some humility... but I'm no mod)

You can use an element with fixed position as background, it will scroll along the page.

@Mantvydas Following example uses TweenLite's tick event that gets called on each frame, similar to requestAnimationFrame if you are familiar with that. Right now this example works with single parent only but you can make it work with multiple parent elements with little work. I have left a lot of comments explaining everything. There are some libraries out there that do parallax effects for you, parallax.js supports gyroscope as well so you can check that if you want. As for not being familiar with GreenSock and coding, I will suggest you to spend some time on forum every day, an hour or so. Start by looking at simple questions and try to solve them. It's great way to learn coding and get familiar with GSAP. Starting with something small is easy get learn and get answers as well.