Leaderboard

Hi @Ali Farooq Just to throw my two cents worth in the mix for you -- a mask could be helpful here. The group of lines appearance is controlled by the mask so I added one white rectangle that is is the same size as the SVG which allows them to be completely visible. A second rectangle with a black fill is then added over the top of the white one which is scaled to block out the center of the lines. Since this is a mask and not a clip-path, you could also add a gradient if you wanted for a nice feathered edge on the lines too. Masks give you a lot of options. Hopefully that helps. Happy tweening.

If I understand correctly, I think he wants to use a loop just to minimize the code. Interestingly, our example in the scrollToPlugin docs actually has loop snippet commented out at the bottom. Here is the code $("button").each(function(index, element){ $(this).click(function(){ TweenLite.to(window, 1, {scrollTo:{y:"#section" + (index+1), offsetY:70}}); }) })

Hi @Ali Farooq, Take e.g. two separate lines ...: Happy tweening ... Mikel

You're firing your scrollTrigger() function multiple times which in turn is firing the sliders() function over and over. The timeline that is created in the sliders() function is starting to play and then is immediately overwritten (many times) so all the starting positions of the elements get out of whack quickly. Recreating the timelines every time you hit the trigger is going to be problematic. I'd recommend looping through and creating your timelines in advance and simply play/reverse/pause them when needed. You may also want to look at something like ScrollMagic or perhaps the new Intersection Observer to trigger those animations. Here's a good discussion which talks about the Intersection Observer. Here's a recent article on Smashing https://www.smashingmagazine.com/2018/01/deferring-lazy-loading-intersection-observer-api/ Happy tweening.

Alright, I think I figured out the issue. It has to do with the fact that you were doing a cubic bezier animation which made it jump to entirely new coordinates right at the start of that tween, but in reverse it doesn't RETURN it to the original (pre-bezier) values. So imagine x/y start at 0,0 and then you do a bezier tween that makes them jump to 100,100 at the start of the tween and animate to new values from there. In reverse, that tween would end up with x/y at 100,100, not at 0,0. You could add a set() just before that and use a relative value for x and y of "+=0" and also apply the transformOrigin there as well so that it's all recorded in a keyframe on the timeline. That way, in reverse, it'll jump back there. Here's the revised code for your isolated version: var action = new TimelineMax() .set($biddy,{autoAlpha:0}) .from($bustOpen, 2, {drawSVG:"0%",ease: easeStepped07},1) .to($eggAbove,2,{y:-10, rotation:10, transformOrigin:"right bottom",ease: RoughEase.ease.config({ template: Power0.easeNone, strength: 1, points: 20, taper: "none", randomize: true, clamp: false})}) .set($eggAbove, {xPercent:-50, yPercent:-50}) // --> THIS LINE IS NEW <-- it records the x/y position and the transformOrigin before the motion path bezier. // .set($eggAbove, {x:"+=0", y:"+=0", transformOrigin:"center center"}) .to($eggAbove, 2, {bezier: { values: motionPath, type: "cubic"},ease: Linear.easeNone}) .to($eggAbove,2, {scale:0, transformOrigin: 'center center'}, "-=2") .to($eggAbove,2, {rotation: 180, transformOrigin: 'center center'}, "-=2") Sorry about any confusion there.

I think a lot of people just use a rectangle or circle in a mask element and call it good, but you can add multiple shapes and opacity levels to come up with interesting results. In a case like yours, you could also use a circular mask and have the outside lines wrap around the shape. You're certainly not limited to primitive shapes. You can add any complex path to cut a space into lines (or other elements) and that will create a tight wrap around the edge or leave a gap as I've done in the above demo. I like your animation as it is. I'm just throwing the mask idea our there for future reference. I'm glad you have a solution. Happy tweening.

I'm sorry that is quite an advanced effect. It would probably take me a few hours to get something working in a rudimentary fashion from scratch. It does remind me quite a lot of what @OSUBlake is doing in the demo below: It has the same effect of dragging and throwing a bunch of things and they get bigger when they get to center and will snap so that one item is "highlighted" when done animating. A bonus feature of Blake's demo is that it wraps infinitely in both directions. This thread (which people should favorite ) has some great discussion points

Point C is correct Scroll Majic is good for this type of thing. Here's a recent post that demonstrates somewhat similar functionality using scrolMajic and how to isolate the animation so it only fires when intended.

Hi @DevSaver Welcome to the forum. If I understand your question correctly, I think this thread can help you. Happy tweening.

Yeah, I'd stay far, far away from eval(). It's a security concern, a performance concern, and I've heard of vendors flat-out blacklisting pages/scripts that use it anywhere. It's much better to structure your data in a way that'd allow you to re-form it properly in the JS context.

Ooooo.... Eval is dangerous... Be very, very careful with it. (But is a super simple way to achieve the required results)... Nice idea.

Thanks @mikel for the innovative idea. I went with your solution. Although I had to modify my SVG and write some additional code but the result was just as I needed and totally worth the few extra lines of code. @PointC I didn't know we could use svg masks like that. Thanks for the info! I've updated my pen if you guys wish to see the final result.

I wouldn't call it stupid. More like wishful. It would be great to have that. But, having said that, you could, in theory build your own Tween factory that reads such string and spits out an actual GSAP object. So, really, it is possible, it's just not in the library. You could create your own plugin.

Also I forget to say, if Greensock did a lightweight scroll trigger plug-in specifically for Greensock and had it as part of one of the paid memberships i think they'd make a small fortune.

Hey, yes, it may be due to brain death... I got into the topic and I lacked the necessary distance at the end to realize that I am wrong. I will solve the problem by changing the user interface. I will show a small button per list entry, which executes directly the drag and drop. Think that is understandable anyway. thanks for your support!

Hey @MarioLapone, Do you see why your code doe not work? What you are doing is trying to add a string into your tml. You can only add a Tween, Timeline or a function into another timeline. GSAP is smart but not omniscient. It doesn't know that string you have passed is meant to be a Tween. That it should parse the string and convert into a Tween/Timeline object...

Hm, I'm not sure that's even possible. iOS, for example, forces you to call preventDefault() on the "touchstart" event in order to effectively stop touch-scrolling, but in your example you wouldn't know at that point if you want touch-scrolling or not (if they keep holding for a long-press, you do, otherwise you don't). I personally don't see a way around it logically, but perhaps someone else has an idea.

cool. glad you got it working!

We talked about The Intersection Observer in this thread (with examples): Smashing just dropped a good article here: https://www.smashingmagazine.com/2018/01/deferring-lazy-loading-intersection-observer-api/ Happy tweening.

Alright, I had to have a little fun with this one, so I created a Codepen that makes this super easy for you: Just tweak the startEase and endEase at the top of the JS panel and BOOM, it'll do it for ya. Click the "CustomEase" link at the bottom and it'll even jump you over to the ease visualizer with that ease pre-populated. Notice you can even click on the resulting custom curve and it's editable Is that what you were looking for?

If you're talking about literally a className tween, yes, GSAP simply applies that class, looks at exactly which css properties get affected by the browser, and animates between the old state and the new one. So you'd need to make sure your class affects things in whatever way it needs to (with prefixes, etc.). I generally recommend against using className tweens just because they seem a tad clunky (and expensive) to me, but they're totally legit and you're welcome to use them.

Is the sound that is not working? The reason for that is because on iPhones you cannot autoplay sound. You can only play sound with user interaction. How about you show a button after the door opens, then you play the sound if the user presses that button?

Thanks for the suggestion. I can see how there are cases where additional callbacks could be useful, but we really try to keep the API as lean as possible in terms of files size and performance. In addition to files and performance, when we add features there's usually a strong case to be made that involves both: something that is in high demand can't be achieved with existing API methods With methods like paused(), isActive(), progress() you can pretty much get any type of state info that you need. In most cases where you want custom code to run whenever an animation is paused you can wire up a function like function pauseAnimation(animation) { animation.pause(); console.log("the animation has been paused"); //more custom code } then later //pauseAnimation(intro) //pauseAnimation(anotherAnimation) On a larger scale you could use a more object-oriented approach where perhaps each animation is the property of an object and that object has custom methods for controlling its animations, firing events, clean up, and all that stuff. Again, your suggestion is appreciated and valid. We always monitor how high the demand is for these types of things and your suggestions always help.