Slide animation from right to left using scrollMagic

Question

I'm new to GSAP.

I was following MilklsNice's ScrollMagic & GSAP tutorial on YouTube.

One of GSAP animation he explained how to make an animation that looks like opening a book from LEFT to RIGHT.

var overlay_test = document.querySelector('.overlay_test');

var animate_in = new TimelineMax();

animate_in
    .fromTo(overlay_test, 2, 
    {skewX: 10, scale: 1.5}, 
    {skewX: 0, xPercent: 100, transformOrigin: "0% 100%", ease: Power2.easeOut})

.box_test{
		position: relative;
    overflow: hidden;
    height: 350px;
}

.img_test{
    width: 800px;
}

.overlay_test{
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    background:white;
    width: 100%;
    height: 100%;
}

(You can also check out the CodePen for this)

At this webpage, I learned how to show a div from right to left. The code is the following:

var left = new TimelineMax ();

var rect = document.getElementById('rect');

left
  .from(rect,2,{width:0},1)
  .from(rect,2,{left:400},1)

Result
EDIT ON
 body{
  background: #414141;
  overflow:hidden;
}

#rect{
  position:relative;
  width:400px;
  height:350px;
  margin: 20px;
  background: green;
  align-items: center;
  overflow:hidden;
}
#copy{
  position: absolute;
  bottom: 0;
  margin: 0 10px;
  
}
h1{
  font-family: 'Work Sans', sans-serif;
  color: white;
  width: max-content;
  margin: 0 auto;
  font-size: 145px;
  line-height: 100px;
}
.very{
  font-size: 80px;
}



  
    Very cool 
      Jack!

(You can also check out for the CodePen for this)

BY THE WAY,
this animation is NOT exactly what I wanted. Because, it just moves a div from right to left instead of opening it like a book from right to left. However, I still tried:

var overlay_test = document.querySelectorAll('.overlay_test');

var animate_in = new TimelineMax();

animate_in
  .from(overlay_test,2,{width:0},1)
  .from(overlay_test,2,{left:800},1)

.box_test{
		position: relative;
    overflow: hidden;
    height: 350px;
}

.img_test{
    width: 800px;
}

.overlay_test{
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    background:white;
    width: 100%;
    height: 100%;
}

(You can also check out for the CodePen for this)

Now, the image disappears. So, I thought that I could apply the animation to the picture instead of the overlay image. However, now the animation starts from top-left corner of the screen as a very tiny image and expand from there.

var img_test = document.querySelectorAll('.img_test');

var animate_in = new TimelineMax();

animate_in
  .from(img_test,2,{width:0},1)
  .from(img_test,2,{left:800},1)

.box_test{
		position: relative;
    overflow: hidden;
    height: 350px;
}

.img_test{
    width: 800px;
}

.overlay_test{
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    background:white;
    width: 100%;
    height: 100%;
}

(You can also check out the CodePen for this)

This is not what I want either.

I want to make an animation that looks like opening a book from RIGHT to LEFT. (the opposite of what I include at the beginning.)

How could I make it happen? :)

לבני מלכה · Accepted Answer

Use in animation right:0 to right:200% also in css change left:0 to right:0

See code

var overlay_test = document.querySelector('.overlay_test');

var animate_in = new TimelineMax();

animate_in
    .fromTo(overlay_test, 2, 
    {skewX: 10, scale: 1.5 , right:0 }, 
    {skewX: 0, right:"200%" ,transformOrigin: "0% 100%", ease: Power2.easeOut})

.box_test{
		position: relative;
    overflow: hidden;
    height: 350px;
}

.img_test{
    width: 800px;
}

.overlay_test{
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    background:white;
    width: 100%;
    height: 100%;
}

Slide animation from right to left using scrollMagic

Answers (1)

Related Questions