These animations are designed primarily for desktop experiences. While they do function on mobile devices, they haven't been fully optimized for smaller screens.
The primary goal is to demonstrate how to utilize some advanced techniques, enabling you to create more sophisticated animations without relying on numerous timelines.
Cards around an ellipse
using the index function method + some math
(Click on the image below)
(Click on the image below)
x: (index) => 300*Math.cos((index*(360/8))*Math.PI/180),
y: (index) => 200*Math.sin((index*(360/8))*Math.PI/180)
y: (index) => 200*Math.sin((index*(360/8))*Math.PI/180)
Cards throwing
when trigonometry comes in handy
x: (index) => 200*Math.cos((index*(180/5))*Math.PI/180),
y: (index) => -100*Math.sin((index*(180/5))*Math.PI/180),
rotation: (index) => -(index-3)*6
y: (index) => -100*Math.sin((index*(180/5))*Math.PI/180),
rotation: (index) => -(index-3)*6
Cards stacking
2 timelines - one for the images - one for the text
x:index => index*25,
scale:index => 1-index*0.05,
opacity:index => 1-index*0.1
scale:index => 1-index*0.05,
opacity:index => 1-index*0.1
Motion.page - for GSAP lovers
Motion.page is a powerful WordPress plugin that brings dynamic, interactive animations and motion effects to your website, enhancing user engagement.
The wrap utility method
one timeline - one wrap
y:gsap.utils.wrap([50,-50,0])
Custom stagger options
Infinite loop made it easy with only one timeline
stagger: { each:0.4,repeat:-1, yoyo:true }