Alright, I am one of those who likes to push things to its breaking point, and from what I am seeing the animation I am trying to do may require jquery? Made a video (a bit clunky) of what the end goal is:
6 Likes
Ahah i love the idea of making a video to explain your animation
2 Likes
Hehe yeah. Something I am playing around with lately, cutting things out, analog mode to better visualize the overall concept. 
Something I learned from the book Steal like An Artist. A desk with no digital tools only traditional tools and vice versa. It forces you to think of the idea first, before relaying too much on the digital tricks to solve the trick.
3 Likes
Definitely will be interesting to see the Demos, because I can only do the first step, because in my mind I am like If… this moves…then do this
But probably I am making it complex. Shall await and see what demos you guys bring,
Cheers!
Ok let’s go can’t wait to demo it 
STRUCTURE
So first you want a big section set to relative so the cross can move in absolute inside.
Let’s call it containerand make it full height of the page, so 100vh.
Next your cross button. Put a div, give it width and height and set it to absolute left corner.
Put your cross image in background.
Next we will put another relative div inside the first one called div slide, width and height 100%, this is the page that will appear when your click on the cross. I ll make it pink to see clearly.
Again, we put it in relative so everything can move in absolute inside.
Now we ll put your text and stuff inside this new div.
So you have 2 texts first. We ll set them in absolute and style them the way we want.
The first text
And duplicate the first to create the second. Add a combo class
2 and give it more top margin
Next we have the third and the fourth text that will appear after.
Let’s duplicate again textand create combo class 3 and 4
Give the same extra top margin to text 4 as text 2 so 100px (+50px)
And finally give 1 as combo class for the first text and create 4 divs called 1 2 3and 4 in an hidden container so we can target everybody later.
Finally let’s add the minus. Same as cross before but this time bottom right corner.
INITIAL APPEARANCE ON INTERACTION
So, the texts are hidden on the left, and when you click on minus they appear.
Let’s do this.
New interaction, initial appearance, -150% on the x axes and opacity 0.
Apply this interaction to text 1 text 2 text 3 and text 4
So now all the text are hidden on the left
Now let’s hide the minus.
New interaction, initial appearance, 150% on the x axe and opacity 0.
Finally lets hide the entire div on the left.
New interaction, initial appearance, -100% on x axes
INTERACTION
Yay, finished soon 
When you click on the cross, it goes to the right of the page, then move up and finally the pink page appears.
So new interaction on the cross, trigger click.
First click Moove x axe like 500px
new step, Moove x axe 500px, Y -100%
New trigger click To make appear the pink div.
Affect another element, div slide
We ll wait first 600ms since the animation on the cross take 400ms (200+200)
Then move to origin.
New trigger click again, this time for minus.
This time we can wait 1000ms, and then move to origin and opacity 100%
New trigger click for 1 wait 1100ms, move to origin and opacity 100%
New trigger click for 2 wait 1200ms, move to origin and opacity 100%
At this point i realize we can’t see the minus on the gif but trust me it works
Now interaction with minus.
On click, affect different element, 1move x -150% opacity 0
On click, affect different element, 2move x -150% opacity 0
On click, affect different element, 3move to origin opacity 100
On click, affect different element, 4 wait 100ms move to origin opacity 100
At this point it does this
Now we move everything back
Go back to interaction on 3and 4, wait 800ms and move back to x axe -150% opacity 0
Add another click trigger for minus.
Wait 800ms and then move x 100% opacity 0
Another click trigger for div slide.
Wait 1000ms on first click, and then -100% on x axe.
Finally let move cross back.
On click, affect different element, cross, move to origin.
And there your have it
5 Likes
Share link is here
https://preview.webflow.com/preview/animation-4fe357?preview=1e58421ca767b5e23bcdb1317d1bc1bb
Live is site here
http://animation-4fe357.webflow.io/
1 Like
Trust me it was painful with GIFS, i have no idea why i have not made a video 
2 Likes
Hmm. So from what I am seeing the div block and all of that is at a specific location so that when I click on that location it cross animate for everything from that location etc. but wouldn’t that like cause issues in a way in real world examples, or even phones?
I guess that’s where using jquery may prove a bit superior. Just looking at the amount of animation that needs to be written down with css, he. @zbrah
1 Like
hum no it works fine on mobile.
It’s a lot of animation, but not that long to set up, maybe 15min if you know how to do it
2 Likes
Yeah I was just curious about it, will dabble with it and see what happens. Was thinking in terms of loading speed for the animation + loading speed of the website when someone loads the site etc.
By the way, for the live site, the buttons aren’t appearing on yours, letting you know.
What do you mean ? You can’t see the plus and minus on the live site ?
1 Like
Yeah on the live site can’t see the + or - sign, but when you do click in the corners the animation happens as it should. And by the way thanks for doing this Demo, it’s opening up some interesting possibilities with Dynamic Listing, that I hope I can apply towards a Fictitious Redesign Project I am working on.
1 Like
Ok weird
Might be a svg issue i guess ?
Can you see it in the editor ?
No problem for the Demo, it was fun to do 
1 Like
Yeah in the editor I can see it, just on the live it doesn’t appear. And great.
@zbrah Thanks for taking the time to build this out. Great example of the support system we provide each other in this forum. Very much appreciated.
4 Likes
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.