Animation: Scale left-to-right

[Victor Work]

Hello, as you can see I'm new to the house. LOL

I am now starting to use GSAP, and have a website that I know it uses,
would like to know the best code to create this animation to load with percentage of the page, with hide in the image and show after the animation. Take the example:

 

https://www.melville-design.com (site using greensock)

[Carl]

Hi and welcome to the GreenSock forums,

 

It is usually best if you provide a demo of the code you are working with so that we can get an understanding of how your elements are set up and part of the GSAP API you are familiar with. 

 

I don't think I understand all of what you are asking but the animations used to reveal the animations can be built a number of ways. I did not study the effect in depth but it appears that a black element is expanding from the left edge. it then shrinks down to the right edge while the image fades in beneath it.

 

This can be accomplished with a sequence of 3 tweens like: 

var tl = new TimelineMax({repeat:3, repeatDelay:0.5})
tl.from(".cover", 1, {scaleX:0, transformOrigin:"left"})
  .to(".cover", 1, {scaleX:0, transformOrigin:"right"}, "reveal")
  .from("img", 1, {opacity:0}, "reveal");

https://codepen.io/anon/pen/VbWXbg?editors=1010

[Victor Work]

Sorry for english, I'm using the translator.

Thanks @Carl for the support in the animation, but the rest of my question was about what will be the best code to nest this animation with the percentage of the page scrolled. I was using ScrollMagic, but it is inconsistent I am opting to use Jquery

[Carl]

Thanks for the clarification I really didn't understand most of your original question and thought you might want the animations to play as the page loaded, which would be a bit of a challenge.

 

As far as triggering the animations on page scroll, ScrollMagic is really the best tool that I know of. I haven't heard of it being inaccurate before.

It seems the site you reference in your first post is using it, so I'm not sure why it isn't working for you.

 

Unfortunately we don't officially provide support for ScrollMagic since it is not a GreenSock product. I'd highly recommend Petr Tichy's ScrollMagic course. His site also has a bunch of very useful free tutorials. 

[Victor Work]

Thanks @Carl, every step of the way I admire GSAP more, for tools and especially for the support you give.

Taking advantage of the topic, I would like to know if you have in codepen some example of Draggable effect equal to this site, which has Axis / SNAP and scrolls only horizontally.

 

https://richard.gs

[Victor Work]

Hello @Carl or anyone who can help me rs.
I'm trying to add Timeline interaction in scroll event, I want the animation to occur only when the element enters the display. I'm using ScrollMagic, but it's animating all at once. Does anyone know how to solve it?

 

See the Pen BRGxLy by anon (@anon) on CodePen.

 

[PointC]

Hi @Noturnoo

 

You'll need to make a few changes to get this working correctly.

 

In your jQuery each() loop, you're targeting all the images and all the .cover classes so everything will trigger at the same time. It would be better to target your wrappers and find() the .cover and image in each of those elements. That way, each animation operates independently and only those elements in that particular wrapper will animate.

 

You're missing a script that allows ScrollMagic to control the GSAP animations.

<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.js"></script>

 

Your trigger hook is set at 0.7 so animations 1 & 2 will fire immediately on page load because they are past the trigger.

 

I'd recommend adding the indicators when working with ScrollMagic. They can verify that everything is where you wanted it or can reveal problems. Here's the link for that script.

<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/debug.addIndicators.min.js"></script>

 

Here's a fork of your pen:

 

See the Pen MmzGZQ by PointC (@PointC) on CodePen.

Hopefully that helps.

 

Happy tweening.

[Wess]

Is there a way to make this responsive?

[PointC]

Hi @Wess

 

Sorry, I'm not understanding what you're asking. Did you mean the boxes would size responsively? Do you have a demo of what you'd like to achieve?

Thanks.

[Wess]

Yes  I am talking about the image boxes. If you look at the Melville site link that's at the top of this tread the images shrink and grow with the screen size as do the covers. All the pens here have the fixed wrapper which prevents the image and cover from resizing. 

[PointC]

I don't know why that wouldn't work. Just set some media queries and resize the pictures. Or just use a percentage for the sizing. Feel free to fork any of the above demos and try it. If you get stuck, we're happy to help with any GSAP related problems.

 

Happy tweening.

 

[Wess]

Here's a pen where I have an image that will shrink and grow but with the changes to the wrapper I lose the cover. How can I get the cover to shrink and grow with the image.

 

See the Pen XyVKpw?editors=0100 by Wezworld (@Wezworld) on CodePen.

 

[PointC]

That'll depend on how you want to set up your CSS. Maybe something like this:

 

See the Pen WYdoPE by PointC (@PointC) on CodePen.

How you handle it is entirely up to you. If you have other GSAP related questions, we'll be happy to assist.

 

Happy tweening.

[Wess]

This is exactly what I was looking for. Thank you very much