scale a div during animation
HI everyone
I realize this herobanner
https://codepen.io/alpha_66/pen/bGQNQrW
the problem I have I don' t need the the last div who are sliding up scale in my code is the div .intro
the div should only slide up
Somebody can give me some idea about how to fix this problem
thanks by advance.
19 Replies
don't call the
retro animation then and nothing will scale.I’m on the mobile at the moment so I can’t really see what you are trying to achive. However api can see that you are applying the scale animation on the contents wrapper. As the .intro is within the wrapper, inevitably it will also be scaled.
My suggestion would be to scale each of the contents children individually except for the .intro. You could do this by moving your animation property to its own selector, something like this
Hi Chris
he don't work like I want
well, that does what you asked - removes the scale from the .intro, so I don't know what else to suggest.
the scale don't work and the animation is so quick
OK, Im back at my computer now. Sorry, obviously it doesn't work as each of the sections has it's own animation which takes preference....
you could add the scale to the slide animation and then give the intro it's own animation without scale.
However in this case each section would scale at a different moment and presumably you want them all to scale at the same time...
the .intro don't need to scale only slideup
animation-delay: calc(1s + 2s + 3s + 4s + 5s + 6s + 7s + 9s / 2 300ms);why are you using these complicated delay calculations?because it s only what I know
1s + 2s + 3s + 4s + 5s + 6s + 7s + 9s = 37s
I was never much good at maths - what is this part doing
... / 2 300ms? (the 300ms)plus 300ms
without the + symbol? that's new to me (not saying it is wrong, just never seen it)
So we have 37s / 2 + 300ms. Why don't you just use 18.700s? You then add the delay for each section eg.:
calc(18.700ms + 0.2s)
I know this isn't directly related to you issue, I am just trying to understand your code to then suggest a way to resolve your specific question
Does the .intro need to be inside the .content wrapper?
I have forked your pen to test it with the intro outside the content wrapper.
I have also moved the timing functions into custom properties as I find them easier to understand and manipulate this way
https://codepen.io/cbolson/pen/GRwgzaKyou are awesome it's what I want exactly but have you at right side the gray space
That gray is the background color you have set on your body
ah, one sec.... there is some extra on the side, you are right...
give the .intro a width of 100vw rather than 100%
ah, and also your max-width: 1200px;
I' am reading your css code to understand what have you change exactly who make the div intro don't scale again ?
I basically moved .intro outside of the .content container so that the scaling on that element didn’t affect it.
The other changes were mostly just me playing with the code to use custom variables but that isn’t necessary.
ok
sorry, I thought that you had seen it so I started playing around with it more 😟
Don't worry now I understand