Jump to content
Search Community

Animation: Scale left-to-right

Victor Work test
Moderator Tag

Go to solution Solved by Carl,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

  • Solution

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 5
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

  • 3 weeks later...

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
  • Thanks 1
Link to comment
Share on other sites

  • 1 year later...

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

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.
×
×
  • Create New...