Jump to content
Search Community

Start animation, interupt, continue animaton

Lenny 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

Hi there!

 

I hope that somebody can help me out with a problem I stumbled upon. 

I want to animate on a scroll by using the superscrollorama plugin. 
With GSAP I can use a timeline to change the position of an element on scrolling. 

 

I want the following actions to take place:

 

  1. Move the element from -1900px to 550px on screen by scrolling
  2. After that, let the element stay at it's position while scrolling a certain amount of pixels (let's say 2000px)
  3. After the 2000px without movement, let the element move from it's current position to 1900.

So we have an animation of an element from the left side of the screen, to the right with a pin moment.

 

I hope someone can help me out here because I have not succeeded in writing a code that doesn't conflict with the first animation and a pin moment.
This is what I have so far: 

controller.addTween('body',(new TimelineLite()).append([TweenMax.fromTo($('#vogel'), 1, {css:{left: -1900}, immediateRender:true}, {css:{left: 550}})]), 1000);

Link to comment
Share on other sites

Hi and welcome to the GreenSock forums,

 

Once you give control of your animations to Superscrollorama I'm not sure there is a way to control or override those animations. 

 

We keep our support here very narrowly focused on the GSAP API, it seems like this issue is very specific to SuperScrollorama. There are some community members that may be able to field this question here, but I think you will have better success filing an issue here:

 

https://github.com/johnpolacek/superscrollorama/issues?state=open

 

I would strongly suggest making a very simple and easily testable demo on codepen or jsfiddle so they can quickly assess the problem and offer a solution.

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