Jump to content
Search Community

Scrollorama - Animation based on section (% not px)

nathinah 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

Hello everybody!
 
I have a problem with the Superscrollorama plugin. 
I'm a graphic desiner, so I don't understand too much about Javascript. But I'm trying to learn it.
I could make an animation with the plugin, but my problem is that I'm doing a responsive website, where each section has a height that fits on the screen. For this reason, I would need to start the animation when the section is displayed, not when I scrolled up to X number of pixels (3000px in this case).
I hope I explained the trouble. I'll paste the code that I would like to change, someone can help me? Pleeeeease :(

controller.pin($('#slide5'), 2800, {
  anim: (new TimelineLite())
    .append(
      TweenMax.fromTo($('#move-1'), .75, 
      {css:{left: 0, top: 0}, immediateRender:true}, 
      {css:{top: 100}}
    ),
      -1.5 // offset for better timing
  )
Link to comment
Share on other sites

Hi and welcome to the GreenSock forums.

 

Unfortunately we don't go too deep into SuperScrollorama support around here. I'm really not sure on the best way to advise you on how to make SuperScrollorama respond to percentages ;(

 

I think your best bet would be to file an issue with the SuperScrollorama team.

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

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