[ThreeJS planes copying images with ScrollTrigger]

Thanks a lot,

 

Here is an updated codepen including the smooth scroll : 

See the Pen zYzZoJr by alguna (@alguna) on CodePen

[ThreeJS planes copying images with ScrollTrigger]

Hello @OSUblake, OK, good to know for editing post

Well, it remains the same, depending on browser width, there is a delay like I reported in my codepen (see screenshot attached on Chrome) :

 

 

I'm really lost with this, not really sure how I can make it more bulletproof :-S 

[ThreeJS planes copying images with ScrollTrigger]

Woowww @OSUblake, 

Thanks a lot, it indeed does the trick!

edit : @OSUblake it is weird, when I look at it within the small codepen window, it works, but opening it in another window it doesnt, and I still have the same problem with some delay between scroll image and image within canvas .. When resizing the window, sometimes it works, but not always, so I think it is going closer to the solution, but I don't understand what is missing 🤷‍♂️

 

[ThreeJS planes copying images with ScrollTrigger]

Hi,

 

I'm trying to replicate images as planes in a background canvas, but I'm facing some issues due to the request animation frame delay (I've set images opacity to half to see the difference and the lag between both worlds). I've also tried to put my main element as a fixed one to make it scroll also with ScrollTrigger, but this didn't change anything. Does anyone have already face this problem ?

 

Regards,

See the Pen rNwWVJW by alguna (@alguna) on CodePen

[ScrollTrigger copy position of another element]

Hi,

 

Thanks a lot for your answer, it will help me a lot. Indeed, I can't nest things as the end goal is to have elements on full size background canvas copying position of elements outside the canvas.

 

Thanks a lot @GreenSock 

[ScrollTrigger copy position of another element]

Hi, 

 

Thank you for your answer, here is a quick setup using the scroll event, but I'm sure I can achieve this with better performance using ScrollTrigger. For the demo, I use only one element, but on the final version I will use several elements, so performance will be an important point.

 

See the Pen PomWrwK by alguna (@alguna) on CodePen

 

With the ScrollTrigger I will be able to use it only when element is on screen, not doing calculation all the time.

 

Thanks in advance,

 

[ScrollTrigger copy position of another element]

Hi,

 

I would like to copy the position of an element with another element while scrolling using scrolltrigger. When I use basic window onscroll position, this is not accurate because it does small 'jumps'. Do you have an idea how I could get the exact position of an element when scrolling in window view ?

 

Regards,

 

Olivier

[Variable element target]

Thanks @OSUblake , it indeed makes more sense this way!

Regards,

 

Olivier

[Variable element target]

Hi, 

 

I have timelines that are the same, but that are targeting different elements, I've set a codepen to show an exemple,

would there be a way to simplify the three functions and timelines into one with a kind of parameter ?

Because only a letter is differing one to another but I can't figure out how I could ...

 

Thanks a lot in advance,

 

Olivier

 

See the Pen vYBLbBY by alguna (@alguna) on CodePen

[Calling Timeline from a variable]

3 minutes ago, Shaun Gorneau said:

Hi @alguna,

 

It's a namespace issue. Putting that Timelines in the window namespace will help you dynamically address them.

 

 

 

 

Thank you very much Shaun Gorneau , that helped me a lot!

[Calling Timeline from a variable]

Waw ZachSaucier , didn't think about that, nice solution! Thank you very much!

[Calling Timeline from a variable]

Hi, 

 

I try to call timeLines depending on which button is clicked, but I get errors. I've set a basic example on codepen.

What I try to achieve, is depending on the button clicked, to restart a TimeLine.

On my project, I have a lot of button, and I want to call the timeLines dynamically, without creating a different event for each button, 

 

Does anyone have an idea how to solve this ?

 

Thanks in advance,

 

Olivier

 

See the Pen GRKoMgZ by alguna (@alguna) on CodePen