Css/js Image Slide Out Animation

I'm trying to recreate an effect like this: https://www.brontidebg.com/product The main image at the top of the screen (to the left) has a really smooth animation out into the scre

Solution 1:

Try this:

https://codepen.io/anon/pen/ZoWVxr

$(".slideright").each(function(){
      var pos = $(this).offset().top;
      if (winTop + 600 > pos) {
        $(this).addClass("slideinright");
      }
      if(winTop === 0) {
        $(this).removeClass('slideinright')
      }
    });

Added opacity, changed the speed and added the reset when the scroll is at the top. I changed your logic a bit so that it doesn't start the animation immediately, it only starts right when the image is in view. You can change the winTop + 600 to control when it starts. Add more to make it start earlier, less to make it start later. winTop + 200 would start the animation further down the scroll.

Solution 2:

You are almost there, but what gives that subtle touch of professionality to the animation is the choice of the ease function. I would try with a softer transition like this one:

transition: all 2scubic-bezier(0.23, 1, 0.32, 1) 400ms;