I’m putting this post here, because I believe what I’m trying to do can be done with pure CSS, but I’m not sure. The project as a whole uses JavaScript and React, so I’m open to any ideas. The trouble I’m having is describing the animation I’m going for in google-able terms. What I have is a quote machine, as described in the first certification project for the Front-End Libraries Certification. I can PM a link to the GitHub if anyone is interested, but it looks like this:
It passes all the tests, but I’m trying to spice it up a little. The effect I’m going for is to have the main body of the page that contains the text and the author of the quote to recede to the top left, while a new quote appears from behind it, giving the appearance of a page turning or cards being flipped through.
I’ve found a few tutorials that have similar effects, but I run into two problems:
- They rely on third-party libraries
- They only work on static sites
The first one isn’t a big deal, but sort of defeats the purpose of trying to learn how to do it myself. In the second case, the explanation usually works on a static set of <div>s, altering their z-index and opacity. The trouble I have with these methods it that they attach CSS classes to elements to keep them hidden until the animation is triggered, but the elements are still created first. Working with React Components, I’m having a hard time creating a new element to bring in from behind the old one.
I hope this makes sense. In my head, it looks like an endless stack of index cards, and each time the button is clicked, the top ‘card’ is flipped off screen to reveal the next one showing a new quote.
