[AirPods image sequence animation using ScrollTrigger]

On 8/20/2020 at 12:32 AM, OSUblake said:

 

Changing the image source isn't a good idea. It takes 1 line of canvas code to draw an image in canvas.

function render() {
  context.drawImage(images[airpods.frame], 0, 0); 
}

 

If the images have a transparent background, then it would be only 2 lines.

function render() {
  context.clearRect(0, 0, canvas.width, canvas.height);
  context.drawImage(images[airpods.frame], 0, 0); 
}

 

 

See the Pen

See the Pen 2152a28cffe2c2c0cca8a3e47f7b21c6 by osublake (@osublake) on CodePen

by osublake (@osublake) on CodePen

 

 

 

 

Hey, this example works great however I can't seem to be able to use it with snapping? It seems to just completely ignore my snap property inside scrollTrigger? I also noticed the top level gsap tween has a snap property itself set to "frame". Is this conflicting? I need the following combination: Image Sequence animation based on scroll position (scrollTrigger) with scrubbing and multiple snapping points to custom frames where I can have text show/hide. Is this possible?

[Swinging / Swaying objects hanging off hook effect with physics?]

Hey guys,

 

Im building a product listing page that looks like the product is hanging off a hook on a rail, and its using a carousel plugin to scroll left to right (as if the items were sliding along the rack).

 

What i'm trying to achieve with Tweenmax is a real life type swinging effect.

 

So each item would be very slowly swaying from wind movements, and then if you hover over it the item would swing or sway more. As well as this when you drag the carousel or click next / prev buttons, the items would slide across and "drag" as they would in real life, being anchored at the top of the hook.

 

I've done a simple prototype with css3 but it's just not cutting it! It needs to be better!

 

I'm very new to TweenMax so i'm not even sure if its possible, but if anyone can help or let me know if what I want to achieve is possible that would be awesome!

 

The other thing is that I want it to be kind of dynamic... so each item sways at its own speed or direction so they don't all look the same... 

 

Prototype CSS3 example: http://kulas-hagenes-and-kutch8587.myshopify.com/

 

I've done some searching and found a few examples that are close to what I'm after:

 

http://pieterbraam.nl/swing/

See the Pen zjsCl by jamiejefferson (@jamiejefferson) on CodePen

http://jsfiddle.net/rhernando/qTSnC/3/ - missing the image

 

 

Cheers!