Leaderboard

Nice demo!!! I was working on a SVG module for PixiJS. Resolution independence!

Ah! what your code does at the moment, if I'm not mistaken, is create a new timeline for each scroll event – and there can be hundreds or thousands of scroll events per second when the user is scrolling! I assume you don't want thousands of identical timelines First of all, you should create your timeline outside of the scroll function. Just create it anywhere and make it paused, like you're doing now. By the way, instead of what you have, you can use this: docTimeline.to(".lightLogo", 1, { y: "200%" }) .to(".text", 1, { x: "0%" }); It's exactly the same thing, just saves you some typing. Inside your timeline, use addPause() to automatically pause it at certain points. Then, when the user scrolls, use resume() to unpause it To change the direction it's playing in (depending on whether the user is scrolling up or down), you can use reversed(). That should be enough. Lastly, have a look online at the concept of throttling and debouncing, to limit the amount of events that do get handled (there's no reason to have so many per second, you can ignore most of them without anyone noticing). Here's a recent post of mine about it: https://greensock.com/forums/topic/18197-gsap-slider-over-scroll/?tab=comments#comment-83832

Way to go @PointC!!

HI @Eeliya You should also take a look at the .shiftChildren() method. https://greensock.com/docs/TimelineMax/shiftChildren() Happy tweening.

Hi Eeliya, That's the expected behaviour. When you add a tween to a timeline, it's not like if you added it to the end of an array of tweens; you just added it at a specific time into an animation. So if you add a tween on the 3rd second of a timeline, it will play at that moment, regardless of what's before or after it. If you would like animations to shift, then maybe such an array is the way to go. Here's an example:

Love the demo, Craig! Your animations are not just a visual thrill but they tell wonderful stories as well. Congrats on your huge accomplishment.

I agree

Hey GreenSockers, This is my 2,000th post so I wanted to take a minute to commemorate the occasion. It’s so much fun to hang out with all of you. As I’ve said before, this is truly a unique place on the web. The community is so friendly and smart and I learn a ton by reading through different approaches to problems and reverse engineering all the clever answers and demos. Thank you all for sharing your knowledge. A special thanks to @GreenSock and @Carl for putting up with me for 2,000 posts. Shout-out to all the other mods @Jonathan, @OSUblake, @Dipscom, @Sahil, @Rodrigo, @Shaun Gorneau, @Acccent, @Visual-Q, @mikel. You are a terrific group of people (and one A.I.) and I’m inspired by all of you. I hope my little SVG tips & tricks have helped some community members save some time and prevent a few headaches. I’m looking forward to continuing this never-ending journey of learning with the entire GreenSock community. Happy tweening. - Craig

Ah, ok. Here is simple pen showing how to tie the progress value of a timeline to the value of an HTML5 progress element.

Those might be guesses about how far to animate the background, which I wouldn't recommend. That is, don't guess the distance, and don't animate the background position. Animate the position using transforms i.e. x and y. Perhaps a related issue about animating clouds. Keep in mind that HTML was not designed to handle a ton of animations. Judging by some of the keywords you use like clouds, sea, ship, alps, flame, a canavs/WebGL solution might be better. You might want to check out PixiJS. http://pixijs.io/examples/#/basics/basic.js http://pixijs.io/pixi-filters/tools/demo/ https://greensock.com/docs/Plugins/PixiPlugin

Poor Jack, he is like the lonely repairman from Maytag.

Hi @Kid Baco Welcome to the forum. Your pen isn't loading any assets so we can't see what you're animating. It's also missing the ScrollMagic GSAP plugin so it's throwing an error. https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js You have some CSS animations in there with some 10,000 pixel moves so I'd guess those are pretty big images and most likely the culprit. GSAP only animates values and all the rendering is done by the browser so I'd doubt that GSAP is the source of any crazy CPU usage. Happy tweening.

I like to animate x and y separately for random movement. Another approach is a Lissajous curve.

Related to @Carl suggestion. You could also make use of an event emitter.

What I had written earlier (which you probably have in an email notification) Is that we can assign any property we want to DOM elements. Just like a book can be assigned an author, title and publishing date. We can assign our DOM elements useful properties that we come up with like animation or useless ones like favoriteIceCreamFlavor. The code you were asking about is inside a jQuery each() https://api.jquery.com/each/ The .each() method is designed to make DOM looping constructs concise and less error-prone. When called it iterates over the DOM elements that are part of the jQuery object. Each time the callback runs, it is passed the current loop iteration, beginning from 0. More importantly, the callback is fired in the context of the current DOM element, so the keyword this refers to the element. I was using an each() loop to run code for each button. I was telling each button that it would have its own unique animation. There were 3 buttons in my demo (green, orange and grey) Each time the code in the loop runs the value of this changes. On the first iteration this means green button, on the second iteration this means orange and on the third this means grey. The each() loop is just an easy way to do the same thing for each button. In my example I'm building an animation for each button. Study the example 2 posts up to see how javascript allows you to assign properties to DOM elements. And don't worry, this stuff is always confusing until it clicks in. It just takes some time and practice.

//find a DOM element and name it green var green = document.querySelector(".green"); //create an animation and name greenTween var greenTween = TweenLite.to(green, 1, {x:200, paused:true}); //give green a favorite ice cream flavor green.favoriteIceCream = "chocolate chip cookie dough" //give green an animation property and assign it to greenTween green.animation = greenTween; //tell green's animation to play(); green.animation.play(); green.onclick = function() { this.animation.reverse(); document.querySelector("#message").innerHTML = this.favoriteIceCream }

Sorry about causing any alarms, but I was having serious problems. Updating Windows to version 1803 seems to have fixed the problem in case anybody else is having problems.

Thank you @Acccent and @PointC

Oh, by the way, .bind() has been deprecated for quite a long time now, as the jQuery documentation states. I don't know if you're following a tutorial but if you are, maybe you wanna look for a more recent one

Hi @ryanf value:( tl1.progress()*100 ) // <- this equals 0 at the start ... so tween to 0 will do nothing In your tl1 your tweening to the value of 0 by passing the tweens .progress() as the value (which hasn't yet moved). Not sure what your trying to achieve exactly, but if you want a progress to animate up to some predetermined value ( based on the value attribute perhaps) you can tween "from" 0 up to that set value.

Don't post the same question in multiple threads. I don't know why you're trying to reverse the actual slide, but maybe these will help...

Sorry, but I've looked over your demo multiple times and I really don't understand what is happening or is supposed to happen. I click on an arrow and then an arrow animates and then a slide pops into view. I think it might be best to work on a much simpler demo. 175 lines is a lot to sort through.

It's difficult to know exactly what your issue is without having any URLs to check and see what is happening. I understand that you might not want to block ads and lose revenue, but you need to understand that if you're allowing ads from all kinds of places, the ads could be running all sorts of code on your website without your permission. Online advertising gets a bad rep from things like this, and it takes the community to be diligent to ensure bad actors don't flood the internet with malicious ads. (These ads might not be intentionally malicious, but just poorly coded. Or simply too heavy to be run on your website.) I've used GSAP in the creation of several thousand ads with varying degrees of complexity, it would have been rare that any of my builds had any effect on a website's performance, and if that did happen, the bugs were most likely code that I created as opposed to code created by @GreenSock

I'm assuming duration is mapped to the height of the window. As @PointC said the speed of the tween is mapped to the duration so to slow it down to 1/2 speed relative to user scroll presumably you would want to make the duration 200%.

Ugh, it seems I lost a bunch of information when I did an edit to the post above. hold on...

Maybe you could have an onUpdate callback that checks the progress and state of the timeline? Might be expensive performance-wise, though.

Wait...you're a moderator? I barely noticed you were here, Craig. (Ha...ha). Seriously, though, congrats on 2000 posts! What a testament to the help you've offered the community around here. Wouldn't be the same without you. Love the codepen! Start working now on the 3,000 post celebratory codepen. Hurry up; can't wait to see what you put together. But no fair adding a bunch of posts like "I agree" and "Well said".

Hey Carl, thanks for the quick reply. I have already created my own Controller object to proxy the immediate timeline commands (pause, play, seek etc) as you mention. That totally works for my own "controlled" calls. But it's not working for other calls like timeline triggers etc. on dynamic timelines (e.g. with user generated custom actions that call timeline functions directly). So there is no other more robust (lower level) solution? The only solution I see right now would be proxying (overriding) the relevant state changing functions of the TimelineMax object. But that would be pretty dirty... Your thoughts? Thanks again for your amazing support!

Just an additional note. You can also use a mask instead of clip-path if you like. You'd just need to make sure all the elements that make up the mask are filled with white. (With a clip-path, the color doesn't matter at all.) If you had a desire to have a stroke or gradient as part of the mask, you'd want to choose mask over clip-path. Happy tweening.

I think this thread can help. Happy tweening.

How about something like this? Happy tweening.

You can do that by using multiple scenes for different sections. But it can get complex with too many unexpected behaviors. I will say avoid using from tweens unless you know how the immediateRender works, check the following video. You can use to tween instead to avoid complexities. For example the following demo works without any issues, Then following demo with from tweens shows some unexpected behavior, it will make sense once you watch the video.

It is going to be little complex but doable. In following demo I am playing an animation by detecting which section is active and calling animation for it. Its not enough though. You will need to create an array of animations so you are able to use index and call different animations for particular section, somewhat similar concept but not exactly as in following thread. So, Step 1, determine which section is active. Step 2, call animation for that section by determining index and use that index to play animation from an array. But that's not enough to reverse animation, so Step 3, Use onReverseComplete callback to trigger the change of section. See if that helps. I won't be able to post complete demo at the moment. But I might work on something similar in couple of days so I will post a simple demo for you.

You are using really old versions of Draggable and TweenMax. I don't have Apple devices to test it but check following demo with latest versions, it should work as this problem hasn't reported by anyone else. To get latest files for your codepen demos, use following link for free to use files and codepen demo for club plugins, https://cdnjs.com/libraries/gsap

Yes, you can add an ease to the vars object of those methods. Something like this: tl.tweenTo("reverseStop", {ease:Power4.easeOut}); When you tween a timeline like this, you're creating a linear tween that scrubs the playhead to/from times/labels. You can add in/out eases to this tween in the vars. Sometimes it's preferable to remove the eases from the actual tweens on the timeline and make them all Linear.easeNone. You then set the eases in the scrubbing tween like I did above. Hopefully that helps. Happy tweening.

Hi @mgb Welcome to the forum. I think the easiest thing to do would be scrub the timeline with the .tweenTo() or .tweenFromTo() methods. You can use those methods to animate the playhead to a time or label. Maybe something like this? More info: https://greensock.com/docs/TimelineMax/tweenTo https://greensock.com/docs/TimelineMax/tweenFromTo Hopefully that helps. Happy tweening.

You can animate the strokeDashOffset. I wrote about it in this thread: Just a reminder though - drawSVG will deal with some browser inconsistencies for you so I'd recommend a Club membership to make your life easier and allow yourself to work faster. More info: https://greensock.com/club Happy tweening.

I'm rather curious myself as to the real-world need here. Personally, I would just transform the SVG itself. I'd think a multi-level nest of divs that each have transforms would just be a recipe for trouble no matter what you're doing, but I like things simple so I don't confuse myself.

Helpful Chrome? Isn't that an oxymoron?

Yep, I'd do exactly what @MindGamer recommended. Simple example: function random(min, max) { return min + Math.random() * (max - min); } function gotoRandomPlace() { //notice the onComplete points back to this same function, so it'll keep going to random coordinates TweenMax.to(...{x:random(-100, 100), y:random(-100, 100), onComplete:gotoRandomPlace}); } gotoRandomPlace(); As for vw/vh units, those aren't supported on transforms because to maximize performance, GSAP bakes everything into matrix() or matrix3d() values which are always px-based (although it does support percentage-based values as well by prepending a translate() or translate3d()). You should be able to relatively easily convert vw/vh on your own, though, like: //converts viewport units to pixels (like "50vw" or "20vh" into pixels) function toPX(value) { return parseFloat(value) / 100 * (/vh/gi.test(value) ? window.innerHeight : window.innerWidth); } //then, in your tween: TweenMax.to(... {x:toPX("50vw"), y:toPX("20vw")}); The only caveat is that since the end result is in px, things won't shift if the window gets resized AFTER the tween finishes. But you could certainly use an onComplete to set those units directly, like element.style.transform = "translate(50vw, 20vh)"; if that's essential for your context. Does that help?

You'd need to animate or set the opacity of new image in the callback. Here's another fork where I've added a 4th frame which appears at the end of the timeline. Happy tweening.

There may be a better way to to this, but I'd probably skip the repeat and the yoyo and call a function onComplete. That function would set a new set of random "to" coordinates, and then start another tween which calls the same function onComplete for a new set of randomized "to" coordinates. Etc. Etc. Cool CSS grain btw.

@smallio You had typo in 'triggerElement'. The triggerHook has value between 0 to 1 that determines where your trigger is going to be. Always a good idea to turn on indicators while developing.

Oh... I have to disagree with @Sahil. You don't want to wander over to the other side of the forum. It's Thunderdome over there. @Sahil is a force to be reckoned with as he charges towards a membership in Comma Club.

Well I don't consider myself GSAP guru either, there are some easy questions that you might enjoy answering. Plus if you really really want people to post questions about banner ads and sizmek, maybe write couple of introductory posts in main forum? I might never do banner ads but I am always curious to know little bit of everything. Some new users might take interest and join you on Banner Animation forum.

Sure, As You can see we are able to add function calls to the timeline at any point in time. .add( function() { if ( !loop ) { tl.stop() } } ) With this You can count the loops or stop the timeline at any point if the number of the loop is the desired. Check out the docs for more timeline control methods: https://greensock.com/docs/TimelineMax

http://www.bannerhost.hu/test/Nissan_Micra_Q42018_HU_750x300_DOUBLECLICK_05/index.html Client: ACG Hungary

I just need some dopamine please! http://www.bannerhost.hu/test/Surf_2018Q1_Mosokapszula_640x360_SIZMEK_03/index.html Client: ACG Hungary

One approach is store a reference to the "currentAnimation". Whenever a button is pressed, reverse the currenAnimation and apply an onReverseComplete that will call a function that will then play the next animation. As Jack mentioned, it really stinks to be forced to wait for an AI to allow you to do something. It also stinks watching transitions that are too long. To alleviate that pain, I increase the timeScale of the currentAnimation that is being reversed: Here is a twist on the same theme, but slowed down and with 3 buttons In the demo above click "green" wait one second hit "orange" while green is still reversing quickly hit "grey" You will see that after green reverses then grey will play. it totally skips orange which is good. the "next" animation to play after reverse is the most recently requested animation. With this technique you will never have 6 different animations running out of control at the same time.

You don't need any clickTag for Adwords. Adwords makes the entire banner clickable by default.