Dynamic effects on elements and background image

[JulietColombe]

Hi there,

I'm creating my personal site with WP, and I'm trying to create dynamic effects to make my site more fluid and interesting to visit.
I want a background image effect, a page transition effect and a scrolling effect.

 

For example, I want to copy this kind of effect to practice this kind of thing :

https://360pm.net/ -> Spiral distortion on background, with an additional touch effect on mobiles.
https://360pm.net/projects -> The zoom out on the background, switching images one by one, and changing the background when hovering over an element.

https://360pm.net/contact -> Smooth scrolling with the page elements

 

I've been looking for solutions on the forums for a few days now, but I still don't know what techno to use for this kind of dynamic effects... I've been looking at Three.JS but I don't know if it's really what I need...
Would anyone please have a tool that they particularly like, and also could GSAP allow me all these effects?

 

Thank you, I really don't know who, or where, I can ask and I'm really blocked...!

 

[GSAP Helper]

Howdy @JulietColombe and welcome to the GSAP Forums!

 

I don't have a lot of time right now to dig into everything here, but I wanted to offer you some quick advice about how to get the most out of these forums...

 

Keep it simple. Don't list a bunch of requirements ("it should ___, and ____, and then also ____ while _____ ..." - that's too difficult to follow). Just pick the very first thing and see if you can make that work. If you get stuck, post one question focused on that one piece, like "how can I pin each section one at a time?" Keep your CodePen focused only on that one piece with as little code/markup as possible. Then once that's answered, move on to your next question/problem. 

 

Baby steps 

 

Before you know it, things will fall into place one at a time.

 

You'll get a lot more people willing to help you if you keep things very simple and clear. A well-crafted minimal demo is GOLD around here - you'll get people falling over themselves to help you if you make a CodePen that's super clear and isolates the issue. Explain exactly how to reproduce the problem, like "scroll down to the blue section and notice how it pins before it hits the top of the viewport" for example.

 

Don't worry - this community has got your back when it comes to GSAP-specific questions. I just wanted to provide some pointers on how to help us help you.