Jump to content
Search Community

Multiple Tweens in one scene

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

I have a website here. http://olle.dyndns-ip.com/tunity/

I'm using ScrollMagic to controll the start and stop of the blue buttons in the side of some of the sections.
It is working good.

However I want to make the code more slim and effective.
Like it is now if I add one more section I have to create one more tween and one more scene.

So the code I have for the moment is.

 

var rad1 = new TweenMax.to('.fordjupning1', 1, {y: '150'});
var rad2 = new TweenMax.to('.tillbaka2', 1, {y: '450'});
var rad3 = new TweenMax.to('.tillbaka3', 1, {y: '1050'});
var rad4 = new TweenMax.to('.tillbaka4', 1, {y: '650'});
var rad5 = new TweenMax.to('.tillbaka5', 1, {y: '450'});
var rad6 = new TweenMax.to('.tillbaka6', 1, {y: '450'});
var rad7 = new TweenMax.to('.tillbaka7', 1, {y: '450'});
var rad8 = new TweenMax.to('.tillbaka8', 1, {y: '800'});
var rad9 = new TweenMax.to('.tillbaka9', 1, {y: '800'});
var rad10 = new TweenMax.to('.tillbaka10', 1, {y: '800'});


var scene1 = new ScrollMagic.Scene({
triggerElement: '#rad1',duration: 200, offset: -50, reverse: true
})
.setTween(rad1)
.addIndicators()

var scene2 = new ScrollMagic.Scene({
triggerElement: "#rad2", duration: 400, offset: -50, reverse: true
})
.setTween(rad2)
.addIndicators()

var scene3 = new ScrollMagic.Scene({
triggerElement: "#rad3", duration: 1000, offset: 50, reverse: true
})
.setTween(rad3)
.addIndicators() // and so on

controller.addScene([
scene1,
scene2,
scene3,
scene4,
scene5,
scene6,
scene7,
scene8,
scene9,
scene10
]);

I have trie the code from this question (edited for my website)
#215
But it does not do it.

$('.tillbaka10').each(function(){
var currentStrong = this;

var tweenStrong = new TimelineMax()
.to(currentStrong, 1, {y: '800'});

var scene = new ScrollMagic.Scene({triggerElement: currentStrong, duration: 800, offset: 50, reverse: true})
.setTween(tweenStrong)
.addTo(controller);
});

 

So how can I make this in an efficient way? With classes as the trigger? Or how is it done?

Regards
Olle

Link to comment
Share on other sites

Hi Olle,

 

Unfortunately in the forums we have to focus our time on GSAP related questions and as much as we love helping we can't out our efforts in 3rd party plugins that work on top of GSAP. On top of that I never used Scroll Magic so I couldn't give you much advice. Perhaps other users with more knowledge about the plugin could chime in.

 

What I can advice you here is that you're creating an each loop on a single element. You're creating the loop on the class "tillbaka10" and perhaps your DOM has only one element with that class. What you could do is give all the elements a common class like "tillbakas" and run the each loop on that class as the selector, like this:

$('.tillbakas').each(function(){
var currentStrong = this;

var tweenStrong = new TimelineMax()
.to(currentStrong, 1, {y: '800'});

var scene = new ScrollMagic.Scene({triggerElement: currentStrong, duration: 800, offset: 50, reverse: true})
.setTween(tweenStrong)
.addTo(controller);
});

By the way the site looks really nice, good job!!

 

Happy Tweening!!

  • Like 2
Link to comment
Share on other sites

Hi thank you for answering.

I got i working. Using ".tillbaka10" or whatever I like as a classname for all the buttons. Misstake I made was thinking the trigger could not be the button itself.

 

One thing though. I could not use {y: "800px"} or {top: "800px"} because of a terrible flickering and had to use {paddingTop: "800px"}

Maybe a bug with the ScrollMagic plugin. I check with the author.

$('.tillbaka10').each(function(){
var currentStrong = this;

var tweenStrong = new TimelineMax().to(currentStrong, 0.25, {paddingTop: "800px"});
var scene = new ScrollMagic.Scene({triggerElement: currentStrong, duration: 800, offset: 50, reverse: true})
.setTween(tweenStrong)
controller.addScene([
  scene
]);    
});

Regards

Olle

Link to comment
Share on other sites

Hi Olle,

glad you got it working. The issue with flickering is most likely due to some of the CSS you've used for positioning and not a ScrollMagic issue.

 

In general, position: absolute (in combination with x, y, top, bottom, right, left or transform) would be the best approach to keep your animations nice and smooth.

 

Good luck with your project.

 

Cheers

Petr

Link to comment
Share on other sites

Hi

Well it's a bit strange. Because if I do like this it works wit y transformation.

var rad10 = new TweenMax.to('.knapp-tusen', 1, {y: '800'});

var scene10 = new ScrollMagic.Scene({
triggerElement: "#rad10", duration: 800, offset: 50, reverse: true})
.setTween(rad10)

controller.addScene([
scene10
]);

But if I do like this the button is jumping up and down like a crazy rabbit. Scroll down to Tunity Organizer section go on the left button Appar an scroll down a bit to see te jumping. Just curious what is causing this ...

(With paddingTop it is ok.)

$('.knapp-tusen').each(function(){
var currentStrong = this;

var tweenStrong = new TweenMax.to(currentStrong, 1, {y: "1000px"});
var scene = new ScrollMagic.Scene({triggerElement: currentStrong, duration: 800, offset: 50, reverse: true})
.setTween(tweenStrong)
controller.addScene([
  scene
]);    
});

Regards

Olle

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