Jump to content
GreenSock

rwchampin22

Best practices of gsap

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 have to be doing something wrong lol....first off i have a parallax scrolling intro to my site ....using GSAP.  i have abt 20 items in total with about 70 individual animations lol..... this is what a small section of my code looks like

 

 

 
  var svg3 = TweenMax.to(".svg-1, .svg-2, .svg-3, .svg-4",1, { rotation: 180 });
  var sceneSvg3 = new ScrollScene({ duration: 1000, offset: 2000})
.setTween(svg3)
.addTo(controller);
 
  var svg4 = TweenMax.to(".svg-1, .svg-2, .svg-3, .svg-4",1, { rotationY: 180 });
  var sceneSvg4 = new ScrollScene({ duration: 1000, offset: 7200})
.setTween(svg4)
.addTo(controller);
 
 
  var svg5 = TweenMax.to(".svg-1, .svg-2, .svg-3, .svg-4",1, { rotationX: 180 });
  var sceneSvg5 = new ScrollScene({ duration: 1000, offset: 9000})
.setTween(svg5)
.addTo(controller);
 
   var svg6 = TweenMax.to(".svg-1, .svg-2, .svg-3, .svg-4",1, { rotation: 45});
  var sceneSvg6 = new ScrollScene({ duration: 1000, offset: 11000})
.setTween(svg6)
.addTo(controller);
 
 
var svg7 = TweenMax.to(".svg-1, .svg-2, .svg-3, .svg-4 " ,1, {  rotation: 90});
  var sceneSvg7 = new ScrollScene({ duration: 1000, offset: 13000})
.setTween(svg7)
.addTo(controller);
 
  var svg8 = TweenMax.to(".svg-1, .svg-2, .svg-3, .svg-4 " ,1, {  rotation: 900});
  var sceneSvg8 = new ScrollScene({ duration: 1000, offset: 13000})
.setTween(svg8)
.addTo(controller);
 
  var svg9 = TweenMax.to(".svg-1, .svg-4 " ,1, {  left: "0%" });
  var sceneSvg9 = new ScrollScene({ duration: 1000, offset: 16000})
.setTween(svg9)
.addTo(controller);
 
 
 
 
 
 
 
 
there has to be a more organized way of doing this...i have pages of code that looks like that lol.... also im not sure if all the repeated code is even neccesarry....some help would be greatly appreciated
Link to comment
Share on other sites

also.....im basically setting the css for every element being animated.....and the using to to() method from GSAP......and im trying to make these animations work on mobile with iScroll but its not working lol...any ideas?

Link to comment
Share on other sites

It looks like you could shorten each bit by moving the TweenMax calls

var sceneSvg3 = new ScrollScene({ duration: 1000, offset: 2000})
.setTween(TweenMax.to(".svg-1, .svg-2, .svg-3, .svg-4",1, { rotation: 180 }))
.addTo(controller);
but other than that, ScrollScene and iScroll are not part of GSAP so you should consult their respective authors/communities on how to use them best.
  • 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.
×