Leaderboard

Thanks, Jonathan. Hi Smallio, thanks for the demo Yeah, there will be situations where custom html/css in the document will interfere with GSDevTools. I suspect the z-index on body and other elements is messing up some stacking orders. No way for GSDevTools to really detect this and adjust. In cases like this you can do 2 things: 1: create your own div with its own css and inject GSDevTools into it using the container property 2: apply some custom css to GSDevTools using the css property as shown below GSDevTools.create({css:{zIndex:5}});

Not sure what you mean by you "can not take out more" Since you said that the problem was in tl4 (which helped) I removed everything else and still saw the problem (meaning everything else wasn't related to the problem). For the purposes of problem solving, the less code you provide the better. Here is your demo reduced: run it in codepen with the console open and you will some logs about tweens overwriting. This is usually the culprit when an animation plays fine once but not on reverse or repeat. The issue is that 2 tweens are fighting for control over the same property at the same time. When this conflict occurs, the engine kills the previous tween so that the new (more recent tween) can run properly. https://greensock.com/docs/TweenLite/static.onOverwrite You can set overwrite:"false" on the bad tween or change its position to 1.8 so there isn't a conflict. (cool animation btw).

Do you mean morph into different shapes? Or just scale up when you hover certain elements? You are just using HTML, for morphing you will need to use SVG throughout your project. I just posted a demo in following similar thread, my implementation is far different than yours but see if that helps.

After responding to your PM that I won't be able to do it because it will be time consuming I still gave it a try because it bothers me to give up in the middle. In following demo I have just re-implemented the mouse movement and implemented the cursor and target parallax. You should be able to reuse it for multiple elements though i haven't tested it myself, I have just copied your button element to check if it works on multiple elements. Though I don't know what you meant by " the circle scale up and align with the arrow ", if you meant something like morphing around the the target element then you will have to take completely different approach and perform some tests to figure out how you will use SVG throughout the project. Though will need to use pointer events instead of just mouse events, in following thread you can see how you can use polyfill and use pointer events. Another thread that shows somewhat similar cursor effect and there is one demo by @OSUblake that shows how you can use SVG, I think you can use that demo to further implement any morphing effects. Again, some of the calculations can be done differently and code can be refactored but you will have to dive in completely to actually use it in your project. And like @Carl said it is really hard to provide answers to such questions, plus without any demo or prior work it makes it harder. Usually it is fine to post such questions for help or guidance but at the same time you should keep working on your problem and post any progress you made, it only helps yourself to learn and get answers. All the best.

I am merely one of many men who contribute in their own special ways. Glad it was an easy fix.

Based on just a quick look, could you not pass the target as an array of items rather than a single item selected by id and then run the logic that detects proximity and fires the reactive animation through a loop or each to test each one individually against the cursor.

Hi and welcome to the GreenSock forums, Thanks for the demo. It looks like your image isn't loading over https. try http in your css. By just looking at your spritesheet (below) I really can't easily assess how the animation is supposed to appear so its kind of impossible to know the frame boundaries or what frame is being shown at any time (which makes debugging difficult) However, I had an old demo laying around that does what you ask 1,2,3,4,5,6,5,4,3,2,1.

Ah, I see the problem - MorphSVGPlugin tries to be very flexible and discern if you're passing in selector text (like ".myClass" referring to an element you want to pull the path data from) or actual path data (like "M1,2 5,4..."). The Regular Expression was tripping over the fact that you started your strings with "." (it was assuming that was an indicator that it's a class selector). All you need to do is put a zero ("0") at the start, in front of the decimal. I'll adjust the Regular Expression to better sense this condition in the future, though. Sorry about any confusion.

... and women. Let's celebrate them ladies as well

Hi @benoit! I'm not sure this is GSAP related at all... But I think I get what you are asking, correct me if I am wrong: You want to stop the scrolling once you hit the height of the block element (400px in your example) for one second, then you want to enable the scroll back after that second. As noted in the StackOverflow answer you have linked to: the scroll event cannot be cancelled. It will also mean, it cannot be interrupted, in another words, you can't stop the scrolling that is already happening. You will not be able to stop the scrolling window at the 400px mark and then continue after that. The one thing I can think of is to snap the element on the position while the rest of the screen scrolls or, completely hijack the scroll right at the very start and force the user to scroll to your desired location. I am afraid I am not versed in the dark arts of scrolljacking so, you will either have to search online for some tutorials or someone else might offer insights. @OSUblake's smooth scrolling thread might be a good start, also.

Yep, Firefox won't report measurements on invisible SVG elements (like display:none). So definitely avoid that (it's a browser issue, unrelated to GSAP). It's better to use visibility:hidden or opacity:0. I noticed a few other odd things: You weren't declaring some variables properly (no "var"). Firefox complained. There was a "display:absolute" (I think you meant "position:absolute") You've got transition CSS properties defined on some elements - be careful about that because those can interfere with GSAP animations. I hope that helps.

That's correct - MorphSVGPlugin is a membership benefit of Club GreenSock (see https://greensock.com/club/). Hopefully you'll find that the membership would pay for itself literally in a matter of days or less. You're welcome to try MorphSVGPlugin for free on codepen as much as you'd like. Here's a URL with links to special versions of every plugin that only works on codepen: https://codepen.io/GreenSock/full/OPqpRJ/. Give it a shot; I think you'll like it. Our entire licensing model (which you can read about at http://greensock.com/why-license/) is based on the honor system and a simple number-of-developers pricing structure. We don’t require that you “register" each person or project, nor do we inject “phone home” scripts that report usage or suddenly cause things to stop working if your license expires. We extend respect to our users and trust that it'll be reciprocated. Thus far, it has worked well. We’ve been doing this for a decade now with no plans to stop. Let us know if you need anything else at all. Happy tweening!

I think to use percentage, you need to animate background position to 100%, though like Carl said it is really hard to predict whatever is happening is correct or not.

The codebase is totally different but it does look like Sahil's solution would work for what you want. Interesting effects, of course I am going to have to steal them.

little tip: no need to quote entire posts in replies. keeps the thread easier to read. thx!

excellent work, Sahil. Silky smooth!

Thanks for the demo. Open up the JS console when you run your pen. you'll see an error: WARNING: a <POLYGON> cannot accept path data. Use MorphSVGPlugin.convertToPath(elementOrSelectorText) to convert to a path before morphing. So you need to something like MorphSVG.convertToPath("#turingshape"); or since you are declaring a shapeEl variable I did: var shapeEl = MorphSVGPlugin.convertToPath("#turingshape") Once that fix is made you will get another error: Error: <path> attribute d: Expected moveto path command ('M' or 'm') This means that MorphSVG is expecting path data like this: var originalStep = 'M.08 0 .55 .21 .13 1 1 1 1 0', step1 = 'M21,0 55,89 8,1 1,1 1,0', step2 = 'M.34 0 .13 .89 .89 1 1 1 1 0', step3 = 'M.34 0 .55 .21 .08 1 1 1 1 0'; I think the demo below should do what you want

Yes, thank you @Dipscom I will keep the idea from OSU for another update, if there is no quick trick. My last code on Android is not so bad.

That's a good start. From what I can see here, reading your code, it still is expected behaviour. As mentioned before, you cannot stop the scroll, so, while the code works in the first scroll, as soon as you scroll again, the windown will naturally scroll as there's nothing preventing it. Even your if() statement inside the refreshScroll isn't doing anything at that point as you toggle the firstTime variable to false thus, that block of code inside the is statement no longer runs. I am sorry I can't do much other than point issues out, I am a bit under other stuff at the moment and can't spare any time to try and tackle that myself. My suggestion to you would be - following Blake's smooth scroll idea, to have your main element body fixed, listen to the scroll event and set a flag 'shoudScroll' then you toggle that flag true or false. While true you translate the fixed element up or down according to the scroll event, while false, you don't.

Very cool. I love the example that highlights the different events with the changing colors.

Disregard my last post. You are THE man Carl!!! Working perfectly

Hi the pooltable, Draggable will certainly help in making each leaf draggable, but there is a whole world of other calculations you will have to code on your own to handle every other leaf and branch updating its position based on the velocity of your drag, the resistance you want to apply, bounce back, etc. I'm in large agreement with Dipscom in that Draggable can be a piece of the puzzle but you are probably better off studying (and using) the code of examples that are out there that already do 90% of what you need.

Hi @thepooltable, Welcome to the forums! The answer to your question is: It is possible. But I have a question for you: why would you want to re-write all of that logic yourself instead of adapting that code to take in touch events? Also why you say 'definitely not verletjs'? That is the first place you should look if you want to replicate what it is doing. The code is public in GitHub, it's just a matter of going over it and locating the logic that creates and handles the IK (inverse kinematics) system.

Oh, it's totally fine to post here. It's not like we get offended or anything - I just wanted to set expectations properly (lest you or others get frustrated, like "why aren't they giving me an answer?") No problem at all. If someone can pitch in and help, awesome! If you do the same for someone else, even better! That's the type of attitude we like to foster around here in general. Happy tweening!

So, I simplified it quite a bit, and made it return something so you can remove the event listener. Here's the updated code: function stipple(id, func, delay, throttle = false, leading = false) { let stippled = function() { if ( !dots.hasOwnProperty(id) ) { dots[id] = TweenLite .to({}, delay, {}) .eventCallback(( leading ? "onStart" : "onComplete" ), func); } if ( dots[id].progress() === 1 ) { dots[id].restart(true, false); } if ( !throttle && dots[id].progress() > 0.01 ) { dots[id].progress(0.01, true); } }; return stippled; } The codepen in my post above is the updated one, I forgot to fork, oops. I don't understand how lodash and underscore manage to do this without storing any external references. Here are the sources, if anyone's interested: https://github.com/jashkenas/underscore/blob/master/underscore.js https://github.com/lodash/lodash/blob/master/debounce.js I'll go with the solution above for now, but please feel free to keep improving on it, and if someone sees a performance issue or the like, by all means share it

Thanks for the thought, but after testing, the vh and vw only change on android devices as I thought. Seems the only way to account for it is to know the actual height of the keyboard for each apple device, which also seems problematic as I'm unaware of anyway of detecting if the user has a 3rd party keyboard installed. And even then, I'm not sure it allows you to programtically scroll while an input is selected. Thanks though for the help.

Awesome! Thanks!

if you don't have a parent element handy, you can always use some good old maths:

Here's a pen

You could rotate the parent element, I think.

You have twice </body> in code

Thanks @GreenSock! I'd love if someone like @OSUblake could point me in the right direction. I'm not expecting proper help, I just posted on the off chance someone had something they had worked on recently as most of the code is done and the part I'm looking to do is basically only Greensock (I think anyway aha) I also accidentally removed babel & didn't notice that when I posted. It's reverted now & only like 50 lines Might help if anyone is interested! I'll try and keep it a bit more on topic in future. Do you know where the best place to post things like this are? I think it would be cool to have a sub forum where people could post their progress and contribute like a team! Thanks again Will

Thanks for reporting back about the problem. And yeah, I know how annoying it is when a browser has a bug that's basically impossible to work around. Ugh! Wish I had a silver bullet for ya. Probably won't work, but here's a weird idea: what if you put an invisible <div> into the DOM that's sized to the viewport (like 100vw and 100vh or % or whatever) with visibility:hidden and then query its offsetWidth/offsetHeight or something like that?

Yeah, sorry, I realized the isActive() wasn't necessary. After posting that example I dipped my toes into a throttle and debounce combo solution. Basically a tween will have an onComplete callback that does the thing you want to do. As you resize you check to see if the progress() of that tween is past 0.5 (50%). If yes you force the tween to the end (making the onComplete callback fire) then restart the tween (which is really a timer) again. The end result is that the custom onComplete callback will fire basically every 0.5 seconds while you resizing (much less frequent than the actual resize events) and then again after you are done resizing. In the demo below the body will change background color to illustrate when he custom onComplete callback (update) is firing. Please understand, this is just me messing around with the idea, not some official, GreenSock-endorsed, way of doing these things Use and tweak as you see fit console.clear(); var tween = TweenLite.to({}, 1, {onComplete:update}).progress(1) window.addEventListener("resize", function() { console.log("resizing") if(tween.progress() > 0.5){ console.log("change color and restart()"); tween.progress(1).restart(true, true); } }); function update() { TweenLite.set("body", {backgroundColor:"hsla(" + Math.random() * 360 + ", 50%, 50%, 1)"}) }

TextPlugin will work too: TextPlugin is available for everyone, its not a Club plugin. You do need to load it in addition to TweenMax https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/plugins/TextPlugin.min.js more info: https://greensock.com/docs/Plugins/TextPlugin

You can do something like this ...

Well, if you just want to know if the playhead is BEFORE that tween starts (which would, of course, be true if it's in the "delay" part of the tween), it should be as simple as: if (animation.timeline.time() < animation.startTime()) { //yep } If you literally want to know if the playhead is directly inside the delay (and not before it), that could also be done, like: if (animation.timeline.time() < animation.startTime() && animation.timeline.time() > animation.startTime() - animation.delay()) { //yep } Does that answer your question?

Yep, @Carl is exactly right. And the reason GSAP doesn't read the percentage-based stuff from the existing CSS is because it's practically impossible since the browser always reports the current style (via getComputedStyle()) as a matrix() or matrix3d() which has everything baked into it. There are no percentages at all. That's another reason why we strongly recommend that folks just use GSAP directly to do their transforms because it's faster, more accurate, and keeps the data segregated properly.

Working. You have to make a fallback.jpg too for every SIZMEK ad. Best if you include it in the .zip.

Outstanding post, Craig! I'm new to the Greensock world (just asked my second question this afternoon ha) and reading through your story has inspired me to learn Javascript via GSAP. It's ironic, as I was driving home from work this evening, I thought to myself "this GSAP thing could really help me learn Javascript as a whole". You're right, it's actually fun learning this way. Greensock is simply amazing. I've already had wonderful experiences with @Carl and @mikel. Seems like a great little community and I'm happy to be a part of it We have a lot of similarities, just from reading through your post. I'd like to thank you for writing this and know that it has inspired me (and probably a lot more) to continue down this scary path. -Shawn

I think I have cracked it, I do not see any issues right now... using both <TransitionGroup> and <Transition> with GSAP , based on the code you gave me , made it simpler and faster. Without the FIXED position that was problematic since you cannot scroll . if you ever need it, just give me a shout. My english is not good enough to publish.

We just received confirmation from AdWords that GSAP is now officially supported and exempt from file size calculations! This is pretty huge news, of course, and our hat's off to Google for making this happen. Conveniently, they're using the same CDN URLs as DoubleClick which means even better caching. https://support.google.com/richmedia/answer/6307288 At this point, every major network that we're aware of not only supports GSAP but also exempts it from file size calculations and hosts it on their CDN. This should make it a lot easier for GSAP users to build an ad once and deploy it almost anywhere. Happy tweening!