[Overlapping section with horizontal scroll]

Hello

Here is an horizontal scroll effect. I would like to know if it's possible to overlapp (pin on the left) the section when scroll and mabe fade in the title.

 

My question is how to integrate ScrollTrigger in a scrolltriger ? and do some other stuf like pinning animation…

See the Pen KKZWpLy by YVNKAD (@YVNKAD) on CodePen

[AirPods image sequence animation using ScrollTrigger]

On 8/19/2020 at 5:02 PM, 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); 
}

 

 

 

got a question in this code :

gsap.to(airpods, {
  frame: frameCount - 1,
  snap: "frame",
  scrollTrigger: {
    scrub: 0.5
  },
  onUpdate: render // use animation onUpdate instead of scrollTrigger's onUpdate
});

what does snap: "frame" mean ?

and frame: framcount -1 too ?

 

[Get initial position on mouseleave React + Gsap]

Thanks @Rodrigo and @ZachSaucier,

i have modified the codepen

 

first i store left and top in a data array.

Then i map the data in a SingleDot component

set a mouseEnterAnimation and an itemRef

then deal with x and y value in a useCallback fonction

and reset value onComplete

is it the best way ?

 

@Rodrigo if you have some time explain me how you can acheive this with UseRef... let me know

 

 

Thanks very much indeed

 

Andy !

 

[Get initial position on mouseleave React + Gsap]

Hello,

Can you tell ne why, when we mouseleave the dots, they don't move back to their initial position ?

Is ther a way to acheive this ?

Loook at the Dots component.

Thanks

Andy

 

See the Pen 36648feb66346e6e7be5d877acdae6ea by YVNKAD (@YVNKAD) on CodePen

[REACT GSAP MORPHSVG PLUGIN]

Hello,

Can you tell me why when i click the button fast, it doesn't toggle back to start position.

Thanks

Yves

See the Pen rNLrbpL?editors=0111 by YVNKAD (@YVNKAD) on CodePen

[Moving / Wavey Line Animation]

i also have this codepen exemple :

have a look at the squigglingLineTween timeline

 

See the Pen VweYaRy by YVNKAD (@YVNKAD) on CodePen

[gsap.utils.toArray]

If i understand,

const targets = gsap.utils.toArray(".class")

is the equivalent as

const targets =  Array.from(document.querySelectorAll(".class")

it convert the result of querySelectorAll from a Nodelist into an Array

 

Andy

[360 image sequence (not sprites), easing in chosen image]

@jpeacock

Just another question, can you show me how did you set the array with the ref on each image ?

Thanks indeed

[360 image sequence (not sprites), easing in chosen image]

@jpeacock

Many thanks !!!!

[360 image sequence (not sprites), easing in chosen image]

jpeacock

Can you show me how your ImagesLoaded Component looks like ?

Thanks !!!

Handy

[GATSBY REACT SCROLLTRIGER]

Hello,

i create this pen with an update of the image sequence on scroll (71 images)

it work fine on codepen but when i deploy to netlify, the update is no longer working. The update is very slow.

i use gatsby.

What am i doing wrong ?

Does anybody know ?

 

Thanks.

 

here is a link of the deploy version : https://naturalzero.netlify.app/

and attach my .js file

videosequence.js

See the Pen ExPrdyg by YVNKAD (@YVNKAD) on CodePen

[Scrolltrigger greensock demo question]

I have one question with this greensock's pen (link).

why using "gsap.utils.toArray(".comparisonSection").forEach(section => {}...." if you have only one section ?

it could perfectly work without and with the trigger set to : .comparisonSection

thanks for your answer

Andy

See the Pen oNjgEjm by GreenSock (@GreenSock) on CodePen

[onReapeat callback issue]

Hello

i would like to repat the doHeart function on every blinkEye

So on the blinkEyeTween, i set onStart:doHeart, onRepeat: doHeart

It work onStart but not onRepeat

 

What am i doing wrong ?

 

Thaks

 

 

See the Pen gOpbLwQ?editors=0001 by YVNKAD (@YVNKAD) on CodePen

[Video animation with ScrollTrigger, GSAP and react]

6 hours ago, ZachSaucier said:

 

Sorry Zack,

i thought i was lost in the flow…

 

i try to set the video's current time inside the scrollTrigger but it doesn't work !

 

any idea ?

Thanks

Andy

[Video animation with ScrollTrigger, GSAP and react]

Hello,

Can you tell me if it is the best way to play the animation with Scrolltriger, gsap and react.

Is there another way to acheive this ?

 

I have attached a codepen demo.

 

Thanks in advanced

See the Pen PoZKxrd?editors=0111 by YVES_V (@YVES_V) on CodePen

[Timing animation]

Hello again

starting the mainFishTL on my project (see on the codepen).

the mouthScaleTween (a scale of the mouth with a yoyo) , the moveFishTween ( a slight up and down movement) and the switchFishTween run after each other and not at the same time…

what am i doing wrong ?

Thanks for your answer

 

Yves

See the Pen qBdWREz by YVES_V (@YVES_V) on CodePen

[Timing With MotionPathPlugin]

Yes that make sense for me.

But it is possible to repeat 3 time a child timeline (octopusTween timeline) and repeat -1 the mainTL ?

i have modified the codepen in this direction. Have a look.

Yves

[Timing With MotionPathPlugin]

I try the MotionPathPlugin to move the octopus along this path but it seems not to be perfectly synchronize every time in the loop animation.

what am i doing wrong ?

I put a white stroke to see the path.

You can fork the codepen if you want and comment each animation on the mainTl (eyeTween, octopusTween, movePathTween) to see what's happened behind the scene.

Thanks for your answer

Yves

See the Pen dyPqPKj by YVES_V (@YVES_V) on CodePen

[gsap utils random]

Thanks for cloning and take time to rewrite and improve the code Jack.

hope It will help some other people too !!!

you're the best

i will show you the whole animation when it's over…

Yves

 

[gsap utils random]

Hi there,

i have create this anemone animation with GSAP 3 and morphSVG plugin (codepen URL).

I would like to random the movement to make it more natural.

I have created this function to create 4 random value between 0.1 and 0.4 :

function onRepeat () {
    var random1 = gsap.utils.random(0.1, 0.4)
    var random2 = gsap.utils.random(0.1, 0.4)
    var random3 = gsap.utils.random(0.1, 0.4)
    var random4 = gsap.utils.random(0.1, 0.4)
    console.log( random1, random2, random3, random4)
  }

and i would like to use them with my 'start' label in my timeline like this :

'start+={random1}'.

How can i do that ?

mabe there is another way to achieve that ?

Thanks for your answer

Yves

See the Pen dyPqPKj?editors=0110 by YVES_V (@YVES_V) on CodePen

[React and SplitText]

Hello, 

i have this problem with react and splitText...

I have replace all the files in the gsap/node_modules from my 'bonus-files-for-npm-users'

and import like this :

import {TweenMax, Sine, SplitText, ease, Back} from 'gsap';

 

 

How can i fix it ?

thanks

Yves