Jump to content
Search Community

TweenMax move image

codi test
Moderator Tag

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

I am using scroll magic a tween max.. I have my teen halfway working it fades in really nice but when you scroll down i wanted it to move up and fade.. do I use css to accomplish this? All the gsap tweens I have seen suggest no.

var tween = TweenMax.to(".sv-logo", 1, {y: -50});
  new ScrollScene({
    triggerElement: '#scene1',
    triggerHook: 0,
    offset: sceneHeight,
    duration: 1000
  })
	
	.setTween(tween)
    .addTo(controller)
    .addIndicators({suffix: "Move"});
Link to comment
Share on other sites

Very difficult to understand exactly what you want. I don't use ScrollMagic, so I really can't provide a detailed answer. 

 

If you want more animations like move up and then  fade-out you would create a TimelineLite that contains multiple tweens like:

 

var tl = new TimelineLite()


tl.to(".box", 1, {y:-100})
  .to(".box", 1, {opacity:0})

 

http://codepen.io/pen?editors=0010

 

you would then add that timeline to your scene and give it a trigger perhaps.

 

You might get some more help here if you provided a very simple working demo, but for ScrollMagic-specific questions you should seek out their support channels. 

  • Like 1
Link to comment
Share on other sites

Is this the same ScrollMagic demo I answered about in your other thread?

 

https://greensock.com/forums/topic/15953-gsap-scrollmagic-swipes-issue/

 

If it is and you want to move a panel and fade it in, you just need to add an opacity or autoAlpha property to your fromTo() tween. Like this:

.fromTo("section.panel.bordeaux", 1, {y: "100%", autoAlpha:0}, {y: "0%", autoAlpha:1, ease: Linear.easeNone});

The animations will be handled by GSAP. ScrollMagic is just used to trigger the animations. (and... no I wouldn't mix CSS animations with GSAP)

 

As Carl mentioned, we do keep the support here on GSAP. If this is about tweening with GSAP, a new demo would be most helpful in providing an answer for you.

 

Thanks.

:)

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