Sahil

If you use killAll, it will kill all your other animations from entire page. Can't you just pause your timeline like you do on mouseleave? The reduced test case you posted doesn't show why you will want to kill your animations. I would suggest posting another simple demo that shows why you need to kill animations.

By last image I guess you mean '#blackimg'? You are writing two tweens with delay of zero on same element and trying to animate same property. So whichever tween was executed last will overwrite previous tweens for same property. If that doesn't answer your question then post a codepen demo.

Also, you should use timeline for that instead of trying to achieve it by using delays.

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,

You were using split text on same elements multiple times, which was creating nodes as many levels deep. In the loop, on first tween you are setting opacity and in next two tweens you are setting color but not opacity. So lets say your animation completed till 3rd line, now all character nodes in first 3 lines have opacity 1 but rest of the lines have opacity 0. Now when you click again, split text is creating new character nodes 1 level deep. First 3 lines will work fine because their parent has opacity of 1 but rest won't show up because their parent have opacity 0. If you were using opacity everywhere it would have worked, but wouldn't have been efficient.

I will suggest reading this article to better plan your animations,

https://css-tricks.com/writing-smarter-animation-code/

You can have either one or another. What you can do though is check referrer on your server side and decide which class to add, if it is your site then don't show loader if it is external url then show loader. If you don't want to mess with server-side then look into barba js http://barbajs.org/

Not sure what your question is exactly.

One of the reasons your animations are jittery can be because your paths are too complex and/or long. You can simplify your paths using https://jakearchibald.github.io/svgomg/

Another reason would be, you are running too many animations at once and asking browser to do too much work. Take a look at following article it has few performance optimization tips for canvas. https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Optimizing_canvas

As for your question about how to setup your animations, the demo you posted has a example using TimelineMax so I am not sure which part is confusing you.

For parallax effect you can't use TimelineMax, here are simple examples of how you can do it in HTML. You can apply same logic for canvas,

Some simple transitions that people find hard to do, you can live code these

https://greensock.com/forums/topic/18904-transformorigin-help/?tab=comments#comment-87689

https://greensock.com/forums/topic/17978-try-to-do-block-reveal-with-diagonal/?do=findComment&comment=82156

This one is simple but also has a bit more advanced demo by Blake

https://greensock.com/forums/topic/18880-page-transition-with-barbajs/

Simple

Add some simple morphSVG, drawSVG and split text effects,

See the Pen aawwgx?editors=0010 by PointC (@PointC) on CodePen

See the Pen oPELMe by PointC (@PointC) on CodePen

Intermediate

Motion blur using SVG

See the Pen WZqBjV?editors=1010 by osublake (@osublake) on CodePen

Animate along the path, a bit pacman touch. You can also include your Mario

See the Pen vWGGGv?editors=1010 by osublake (@osublake) on CodePen

FLIP using GSAP to animate flexbox

See the Pen vWGGGv?editors=1010 by osublake (@osublake) on CodePen

Drag along the path

See the Pen YYemRa by osublake (@osublake) on CodePen

Circlular clip path

See the Pen QKEjwv?editors=1010 by osublake (@osublake) on CodePen

Handwriting hamburger

See the Pen zLbxzO by PointC (@PointC) on CodePen

Movie rating slider

See the Pen devBRB?editors=1010 by PointC (@PointC) on CodePen

Gooey Dial

See the Pen oqeJbo by PointC (@PointC) on CodePen

Polygon snapping

See the Pen QdbQjN by osublake (@osublake) on CodePen

SVG Dynamic Text

See the Pen jpEdBd?editors=0010 by PointC (@PointC) on CodePen

Advanced

See the Pen LmOvEQ by PointC (@PointC) on CodePen

See the Pen RNLdpz by osublake (@osublake) on CodePen

See the Pen XXbLer by osublake (@osublake) on CodePen

See the Pen dMLQJr by osublake (@osublake) on CodePen

basically all of Blake's popular demos.

Ran out of time.

Ya you can do that but working with pseudo elments in javascript is a bit more complex. For example, you can't define your rules together. You have to select them using entire string the way you defined them, for example if you defined them in CSS as '.parent .child:after' then you must use that entire string to select them. '.child:after' won't work.

It gets a lot more easier to work with actual elements. Or using SVG to do animations like these. Here is same example using drawSVGPlugin,

Few things to note,

1. SVG viewbox is set to '0 0 100 100' and preserveAspectRatio is set to false so svg will stretch if element's height width changes.

2. The stroke's vector effect attribute is set to 'non-scaling-stroke' so stroke won't look stretched with svg.

3. I am using extra path that gets visible when animation completes because you could see tiny gaps on the edges. It can be avoided by setting different line cap and line join.

4. SVG overflow is set to visible so stroke won't get partially hidden.

Ya you can have multiple timelines starting simultaneously in parent timeline using position parameter. Take a look at following video,

4 hours ago, Periyasamykrishnan said:

how to add delay on  oncomplete function?

Two ways,

1. Add empty tween at the end of Timeline,

timeline.to({}, delayTime, {});

2. Use delayedCall inside onComplete function,

var Tween = new TimelineLite({
  onComplete: function() {
    TweenMax.delayedCall(delayTime, function(){
    	this.restart();
    });
  }
});

You can change the speed by changing timeScale on reverse.

But to do that your timeline should be constructed as single parent timeline, that can contain other timelines. Take a  look at following article on how you can write better animation using functions, you are already doing it just need minor tweaks.

https://css-tricks.com/writing-smarter-animation-code/

Oh my turn! my turn!!

PS: Sorry couldn't resist 

I noticed this in Chrome few days ago, solution I came up with was using filter on svg element. Then set svg opacity to 0.01 and set position to fixed so element will stay in viewport.

Not a bug. You have two fromTo tweens which have immediateRender set to true by default. So when second fromTo executes, it immediately renders your path to that value. You can either set immediateRender to false or use a 'to tween'.

Just came across a tweet, couple of days ago p5js launched their web editor. So you won't really have to mess with Codepen.

https://medium.com/processing-foundation/hello-p5-js-web-editor-b90b902b74cf

https://editor.p5js.org/

In your demo, you had syntax errors and you weren't linking p5.js. So nothing was working. You also need to setup your canvas by using createCanvas method.

I don't have any experience with p5.js but take a look at following video. That channel will take you on a long journey and has a lot of lessons on p5.js.

In case you you need to animate your objects, you can use GSAP(for what this forum is). You just need to define your values in form of object. To demonstrate, I have changed your body variables in object and animating them using GSAP.

If you ever decide to learn HTML, CSS and other stuff, we can point you to some helpful resources. And if you have GSAP API related questions then we would be happy to help.

Ya sure you can animate multiple properties of same element. In following demo I am using timeline and setting position parameter to zero so both animations will start at same time. If you are not using timeline then you can define two TweenMax tweens and they will run at the same time.

Here is @OSUblake's demo showing how you can use morphSVG on canvas.

Ohk, it's not really GSAP thing just how scale behaves when you set cx, cy attributes. I was noticing translate x and y changing in matrix but it wasn't reflecting in _gsTransform. Now it's clarified.

Not sure why it went unanswered. Problem is OP was changing cx, cy attributes of the circle but once at start when you set scale to zero, GSAP will set transform origin based on that initial position. That's why all scale downs were ending up in top left corner.

The fix is pretty simple, use GSAP and set the circle's x and y translate. Another thing to note, unlike HTML elements the default transformOrigin for SVG elements is top left corner.

@GreenSock I guess it is conflict between data-svg-origin and css transform-origin, I can see matrix updating when scale animates, but _gsTransform doesn't change so it is changing in CSS I guess. Can you explain? Here is reduced test case.

No you don't have to get club membership to use club plugins in Codepen projects. Support for codepen projects was added couple of months ago.

Make sure your files are linked properly, if you are still facing problems then post a link to your project.

Quote

No, not from a css or after effect sense! It does from an programming sense where [0] is the first in an array. I suppose it is in fact a form of an array defined first by the parameters of the spritesheet. It took me visually doing it with no overflow to get it.

In previous thread, @PointC was correct. The first frame is visible that's why you have to reduce it by one frame. There are no arrays involved, it is just you shifting background in multiply of frame width.

You can add and remove the ticker event listener on mouse enter and leave.

6 hours ago, sali and the kat said:

var autoPlay = TweenLite.delayedCall(1, setSlide);

 

To pause it and restart im fighting.... 

You can pause that and restart just like any tween because it is instance of TweenLite, autoPlay.pause() and autoPlay.restart().

Not sure what you mean, the effect is based on width of the spriteslider so you can't really change the distance after which frame will change. You can easily add longer animation with far more frames and it will perform same. You can even use video with same logic.

The speed of your 'tween' can be 10 seconds or 1 second, it won't affect the mouse interaction. You just need to pause your tween when draggable interaction starts.

16 hours ago, OSUblake said:

If you've ever heard of the golden ratio

I get to hear that often but only as 'Golden Ratio logo', 'Golden Circles' etc. So I decided to get to bottom of it before I learn about silver ratio, then one thing led to another and this is what I ended up with. This has no relation with golden ratio, just me drifting somewhere randomly.