Hi all!
Last weekend, I decided to recreate two animations that I was inspired by from two websites: Stock Dutch Design from the Netherlands and TYHSSEN-BORNEMISZA.
At first, I attached my CodePen link so that you guys can see the kind of animations I recreated this time.
The Stock Dutch Design website uses a beautiful color combination, and the color transitions when hovering over their Lookbook or Core Values sections are visually pleasing. The animation that I recreated involves an image fading in from the top with a slight zoom-out effect, while texts appear from the bottom when hovering over one of their core values. For this animation, I opted to use only vanilla JS, although it would have been easier with GSAP. However, using JS was helpful in understanding what's behind GSAP's works. :)
What I really appreciated about THYSSEN-BORNEMISZA's website was its grid and magazine design. It's amazing how a lot of information was successfully put together in this design, making it easy to find the information you need. The animation that I recreated involved photos spreading around when their section is in the viewport (See above).
After recreating this animation, an idea came to mind. If an image is clicked, it could move to the center of the viewport with a FLIP animation from GSAP. That would be a cool animation! :)
Hope you enjoy this and you got some inspiration.
Matane!