Best practices of gsap

[rwchampin22 0 Likes (Newbie)]

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

[rwchampin22 0 Likes (Newbie)]

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?

[jamiejefferson 1,185 Likes (Superhero)]

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.