- This topic is empty.
-
AuthorPosts
-
October 21, 2019 at 6:21 am #297560JustMParticipant
Hello,
I’m trying to recreate https://diprella.com/sign-in page and I’m stuck as to how to implement the transitions when clicking on the sign-in or sign-up buttons respectively. I found a similar tutorial here: https://www.florin-pop.com/blog/2019/03/double-slider-sign-in-up-form/ but it does not work when the ratio of the form content and image content to be 70% and 30% respectively. I would appreciate any guidance in the form of suggested html structure and resources on the necessary positionings/animations.
October 21, 2019 at 4:37 pm #297665uxfedParticipantA codepen with your progress would be useful, so we can see specifically where you’re having trouble.
October 23, 2019 at 6:31 am #297742JustMParticipantHere is the codepen: https://codepen.io/JustM/pen/ExxWEYr
I managed to make the image container transition to the left, I can’t figure out how to:
1. Grow the width of the container until it reaches the middle of the screen, then once in the other half of the screen reduce it’s width to it’s original value of 30%
2. Change the content of the image container (the paragraph text and the button text)October 23, 2019 at 5:30 pm #297814uxfedParticipantThat’s a really good start!
What I’d suggest is breaking this up a bit. So starting with the image-container content, it looks like in the dribble they have two blocks of content inside image-container, and as the image-container is transitioning across the page the content inside it is also transitioning in the other direction. So you won’t actually be “changing” the content inside image-container, instead you’ll be moving one block of content out, and another block of content in.
For the width of the image-container iself, I’d use a CSS animation. It looks like you started doing this because you have “animation-name: moveAndScale;” in there. It’d be something like:
@keyframes moveAndScale {0% {
transform: scaleX(1);
}50% {
transform: scaleX(1.5);
}100% {
transform: scaleX(1);
}
}
You’ll need to apply that animation directly to a separate element which contains the background though, because you don’t want to transform the text inside the block, only the background.October 24, 2019 at 12:54 pm #297842JustMParticipantMade some progress :)
Managed to make the animations/transforms work one way, but I can’t figure out how to reverse the animations. Simply removing the class abruptly positions the elements in their original position, adding a new class with a new animation does not seem to work either. Any thoughts?
Thank you for your help so far!
October 24, 2019 at 5:45 pm #297850uxfedParticipantYou could include animation: moveContentRight 1s forwards; as an inline style on image-container. Just make its keyframes a reverse of the left one.
One thing you’ll also need to look at is how to get the image-container to line up with the left side of the screen. You might have to replace translateX with right: calc(100vw – whatever the image-container width is);.
October 25, 2019 at 2:32 am #297868JustMParticipantAdding an inline style does not work either, when changing the animation, the element is restored to it’s original position, I’m assuming because of the removal of the animation and then the new animation is applied which moves it to an incorrect position to the right. You can check out the codepen to see what happens
October 27, 2019 at 3:27 pm #297956uxfedParticipantI’m guessing you’ve done some more work to it because that’s not what’s happening now. It’s just including -left: 100px.
I tried what I described last week by tweaking your codepen at the time and it works. You just needed to change the keyframes of moveContentRight so they’re the reverse of moveAndScale. The trick is the starting position of the second animation is the same as the end position of the first one so it won’t jump around.
October 27, 2019 at 3:49 pm #297963SATRIA212Participantgood
-
AuthorPosts
- The forum ‘CSS’ is closed to new topics and replies.