Leaderboard

"t" can be named whatever you want. It represent the progress of the animation, so it can be thought of going from 0% to 100%. From Flubber's docs. var interpolator = flubber.interpolate(triangle, octagon); interpolator(0); // returns an SVG triangle path string interpolator(0.5); // returns something halfway between the triangle and the octagon interpolator(1); // returns an SVG octagon path string So you pass that progress value into flubber, and will figure out where the points on the shape should be.

You can do that by determining velocity of mouse or scrolling, then use that velocity to apply skew. So to determine velocity you can use simple easing and take difference between target and easing value. Here is demo showing original effect based on mouse. This one uses a predefined tween, I set the progress of tween based on eased value. The scroll based effect is a lot more simple as you don't need to use any predefined tween,

What country? Interesting library. It looks like it works differently than MorphSVG, drawing a bunch of tiny line segments instead of Beziers. You can animate some property on an object from 0 to 1 and fill in the rest.

Hi again @emilychews If you try my above codepen again you should see its working, I guess codepen didn't save my pen correctly. You don't have to rework your code just wrap with if statement checking the length property or ... You can just have an if statement around the target element for your tween. If .page-1 exists that use that, if it doesn not exist then use .box-1 variable. Using ternary operator way: var page1; page1 = (page1.attributes.length === 0) ? document.getElementsByClassName("page-1")[0] : document.getElementsByClassName("box-1")[0]; tl. .from(page1, 1, { y: 10, opacity: 0.3 }, "start") Or using regular if statement block for better readability since ternary operator way is one long line. var page1 = document.getElementsByClassName("page-1")[0]; if (page1.attributes.length === 0) { // use .box-1 if .page-1 class does not exist page1 = document.getElementsByClassName("box-1")[0]; } tl. .from(page1, 1, { y: 10, opacity: 0.3 }, "start") Like this: Does that help

Hi guys, Why not use GSAP for the presentation itself. Here's a little suggestion for an opener. By beamer in 4K whatever on a giant screen!?! OK, Charly is a bit older, sluggish and mumbling. @Dipscom: You may have your own avatar that suits your character. Best regards Mikel

Keep in mind @emilychews, that under the hood GSAP uses document.querySelectorAll() for the tween target parameter. So this way you just simply put your CSS selector in your tween target. This way you have less code to write tl.from(target, duration, vars); The target can accept a string also to put your CSS selector: tl.from(".page-1", 1, { y: 10, opacity: 0.3 }) Taken from the GSAP from() Docs: https://greensock.com/docs/TweenMax/static.from() target: Object Target object (or array of objects) whose properties should be affected. When animating DOM elements, the target can be: a single element, an array of elements, a jQuery object (or similar), or a CSS selector string like “#feature” or “h2.author”. GSAP will pass selector strings to a selector engine like jQuery or Sizzle (if one is detected or defined through TweenLite.selector), falling back to document.querySelectorAll(). Happy Tweening

Some browsers apply pixel snapping which makes scaling jerky - you can force the browser to avoid the snapping by rotating the image slightly, even like 0.1 degrees. And for the record, the SVG spec doesn't allow 3D, so setting z:0.01 doesn't do anything for you

I'm not sure I completely understand the desired result here, but maybe this will help. You can pause() the repeating timeline, find out how much time is left in the current iteration (to use as the progress tween duration) and then tween the progress to 1. At the end of the progress() tween you can then kill() the timeline. Maybe something like this. Does that help? Happy tweening.

I think @Sahil has found a way into the "Blaketrix". He grows more powerful every day. Excellent work! ?

Hi @emilychews If I understand your question correctly, you could do this: var page1; if(page1){tl.from("#box2", 1, {y:10, opacity: .3}, "start");} Does that help? Happy tweening.

Hi @kalreg, At what time should the second animation start. How should this animation be triggered? An example on CodePen would be very helpful. Kind regards Mikel

Hello @emilychews and Welcome to the GreenSock Forum! To make your code run on just the page you want without throwing that error when it doesn't exist... You can do this by checking the length of the page1 var is greater than zero which i have below, or even check that it doesn't equal zero: var page1 = document.getElementsByClassName("page-1")[0]; if (page1.attributes.length > 0) { // your gsap and other code goes here } And with all your code: Happy Tweening!

Hi Mikel, The problem wasn't the paths, those should have been circles too but was an issue with the creation of my SVG. Anyway I have found a way to fix my problem, in case anyone else comes across this. Instead of creating a new timeline max, I just triggered the fadein and fadeout functions at the same time on entering or leaving my scrollmagic scenes. This works in reverse and runs smoothly for me (no loss of circles) new ScrollMagic.Scene({ triggerElement: '#section2' }) .on('enter', function () { fadeOutAnimation('.animation-intro .colored-circles'); fadeInAnimation('.animation-impact .colored-circles'); }) .on('leave', function () { fadeOutAnimation('.animation-impact .colored-circles'); fadeInAnimation('.animation-intro .colored-circles'); }) .addTo(controller); This works nicely for me. Still not sure why the other way lagged but maybe this just plays nicer with scrollmagic? Cheers Panda

Sure is:) Kind of obvious when I look at it! Thanks for the fast answer!

Sure, all you need is one onUpdate. Here's some simplified code: let gradient = { valA: 0, valB: 0 } elem.tl .to(gradient, 1, { valB: 100, ease: Linear.easeNone, onUpdate: () => { TweenMax.set(elem.el, { webkitMaskSize: 'cover', webkitMaskImage: `linear-gradient(170deg, rgb(0, 0, 0) ${gradient.valA}%, rgba(255, 255, 255, 0) ${gradient.valB}%)`, }) } }, 0) .to(gradient, 0.5, { valA: 100, ease: Linear.easeNone }, "-=0.5"); You can have tweens update the raw "gradient.valA" and "gradient.valB" as much as you want, and just point their onUpdate to a common function if you'd rather - the point is simply to have that function apply ALL of the values to the final string. Is that what you're looking for?

Thanks for the demo. Its very helpful. Since you are new to the platform this is a great challenge to try to tackle as a beginner, however it appears you are trying to do some optimizations (like creating loops) before really understanding how things work. There are a few errors and things I don't understand that are probably just due to experimenting and lack of experience (which is TOTALLY fine) and I don't want to spend a lot of time picking it apart but some things to note: you shouldn't be assigning multiple tweens to the same tween variable (var tween = TweenMax.to()) you can't put repeats on TweenLite tweens, only TweenMax tweens instead of using animation.add() you should use animation.to() to save a lot of typing (see my example below) Most importantly, when working with timelines its crucial to understand the position parameter. You should be using it instead of delays on each tween in your timeline. Please study this page: https://greensock.com/position-parameter - Once you understand that page you will be well on your way to becoming a timeline master. In cases like this I would strongly suggest working with a very very reduced example (as little HTML and CSS as possible) and writing the code long-form (no loops) so that you get the basic effect you want working correctly, with the right timing BEFORE you try to refactor it and make it shorter. Please take a look at my example. It may not be exactly what you want, but should be a good starting point. Once you get the text hiding and revealing they way you want, then you can try to work with a more complex svg, additional elements and different effects for the wipe.

Hm, your SVG doesn't seem to be set up to do this type of thing really well, but here's a fork of your codepen that splits things up into some functions that spit back timelines that you can nest into a master timeline to keep things more organized: I'd strongly recommend reading this article that explains this concept: https://css-tricks.com/writing-smarter-animation-code/ Does that help at all?

Absolutely, GSAP supports pretty much every browser. The problem here is that "width" is an attribute for SVG elements in this particular case, not a CSS property, so you simply have to tell it to target the attribute like: attr:{width:0} Here's a fork with the proper code, and I simplified a lot of your other code too: Better?

Are you switching from landscape to portrait (or vice-versa) AFTER the animation? If so, that'd make sense because you're calculating the window.innerWidth/Height initially and that gets baked into the x/y values. Typically if I want to center something, I'd do something like: TweenMax.set(divId, {xPercent:-50, left:"50%", yPercent:-50, top:"50%", position: "absolute"}); Does that help?

Hi @tun712 Welcome to the forum. I wrote a post on CodePen about how to do this with DrawSVG. https://codepen.io/PointC/post/seamless-loop-svg-stroke-animations Hopefully that helps. Happy tweening.

Nope. .checked is a property of the input. :checked is a pseudo class representing the state of the input, and would be applied based on the value of the property. I'd imagine it would be pretty easy to get past a "I'm not a robot" checkbox in a CAPTCHA if all a spammer needed to do was apply a pseudo class.

Well, the Neuropathway Predictive Algorithm certainly explains a lot. Apparently the Rudimentary Phonics Engine from a couple years ago has morphed into something much more intelligent. With this new technology, GSAP will soon become the ultimate power in the universe. Resistance is futile. I thought the other thing this demo needed was more cowbell (Google it if you don't get the reference), but I couldn't figure out how to add that so I added some impact bursts instead. I like the way this turned out. I may tweet it at CodePen tomorrow and see if I can get it picked. Somebody may find it useful and I always enjoy promoting GSAP over there.

PS Since you're a Club member, I'd also recommend using DrawSVG for this effect rather than calculating the path length and animating the dashoffset manually like that. It'll make your life a whole lot easier. Happy tweening.

HI @WiljeOnline Welcome to the forum. Your SVG is centered in that block, but your path is drawn far outside the bounds. I added a simple rectangle to the second SVG to show that it is indeed centered as it should be. To solve the path problem I just added this line: TweenMax.set("#path3", {x:-348, y:-215}); Here's a fork of your pen. Hopefully that helps. Happy tweening and welcome aboard.

Hm, it's very difficult to troubleshoot blind and it's odd that you can't replicate the issue in codepen, but it almost sounds like when the transformOrigin is being set, the element has a zero width/height. Have you tried using a TweenMax.fromTo() instead of two calls, a set() and from()? That'd give you the most flexibility to specify exactly what you want things to start and end at. If you still need some help, it'd be super incredibly helpful to see a demo of it not working somehow

Wow, it worked like a charm! I added {rotation:0.01} to the Tween and now the SVG scales more smoothly than DIV.

Ah, I'll try that. Thanks so much Jack! Always an honor.

Oh, sure, you can just animate it: TweenMax.to("#wheel", 1, {rotation:180}); Is that what you mean?

Hi @kalreg, Repeat:-1 runs endless ! You have to kill or to pause the Timeline. This could be an option: Happy tweening ... Mikel

Hi @thepandalion, Welcome to the GreenSock FORUM. Maybe this will help you further: Happy tweening ... Mikel

Indeed, very nice work @Sahil!

Great job, Sahil. love the demos!

@OSUblake Thank you very much. I live in Brazil. Sorry for the basic questions. I worked 4 years developing simple websites and I ended up getting very comfortable where I was. Now I see that I have deprived myself of much knowledge. It's been a month since I quit my job and now I want to learn how to do more sophisticated things and open my own business, because here in the region all companies only make basic websites. I also really enjoyed this library. But I found it a bit heavy. There's this too, if I did not get something free from tweenMax: I always see you helping everyone here. Again, thank you very much for your work.

Sure, it complicates things a bit but it should still be totally doable with something like getBoundingClientRect() - please see this post for an example: If you're still needing help, please create a reduced test case in codepen and we can take a peek.

So maybe just use to() instead of set()? TweenMax.to(divId, 1, {xPercent:-50, left:"50%", yPercent:-50, top:"50%", x:0, y:0}); (Assuming you've got position:absolute in your CSS)

The Neuropathway Predictive Algorithm already factored that in. Oh, it WILL be be completed. There ain't no way @PointC is gonna do nothing for a few months. He'd go crazy.

We love hearing that! It's one of the things we're most proud of around here. Happy tweening (er...dragging)!

I upgraded to latest react build and after adding `dragClickables: true` it all works beautifully. If adding this in by default might affect other codebases, then maybe just mention about this for React users - I would be fine either way. BTW, I've been using GSAP for the past couple of days only and I must say - this has been the most reactive support I've ever encountered! Good job!

Thanks! There are so many issues created by webpack that you'd think GSAP is broken, but it's not. Webpack is just very unintuitive. It made as much sense to me as the source code to Apollo 11 guidance computer the first couple of times I used it. I eventually had to take an online course to fully understand it. But most of these problems wouldn't exist if people would just a CDN for most of their dependencies. I don't get why everybody is so hellbent on importing a bunch of small modules. If you think you're somehow reducing the file size or optimizing your code, you might want to take a look at the code it generates. This is a must read, revealing the true cost of modularizing your code. https://nolanlawson.com/2016/08/15/the-cost-of-small-modules/