Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Victor Work

Animation: Scale left-to-right

Recommended Posts

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)

Link to comment
Share on other sites

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

  • Like 4
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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. 

  • Like 1
Link to comment
Share on other sites

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.

 


  • Like 1
Link to comment
Share on other sites

  • 3 weeks later...

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

 

Link to comment
Share on other sites

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.

:)

  • Like 2
Link to comment
Share on other sites

  • 1 year later...

Is there a way to make this responsive?

Link to comment
Share on other sites

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.

  • Like 3
Link to comment
Share on other sites

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. 

Link to comment
Share on other sites

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.

 

  • Like 2
Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

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.

  • Like 3
Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×