Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS High Level Guidance on transitions and transforms

  • This topic is empty.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #297560
    JustM
    Participant

    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.

    #297665
    uxfed
    Participant

    A codepen with your progress would be useful, so we can see specifically where you’re having trouble.

    #297742
    JustM
    Participant

    Here 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)

    #297814
    uxfed
    Participant

    That’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.

    #297842
    JustM
    Participant

    Made 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!

    #297850
    uxfed
    Participant

    You 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);.

    #297868
    JustM
    Participant

    Adding 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

    #297956
    uxfed
    Participant

    I’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.

    #297963
    SATRIA212
    Participant

    good

Viewing 9 posts - 1 through 9 (of 9 total)
  • The forum ‘CSS’ is closed to new topics and replies.