Jump to content
Search Community

UpdateTo Problem with SuperScrollorama

Seraph-Design 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 am trying to animate an object from its current position to the left so that its scrolling out of the screen. This works so far, the problem is the object dynamically changes its width if you click on an object within it. If i update the tween to animate to the new width value and scroll back to the start the object moves wawy to far. When resetDuration is set to true i can't scroll back to the start, the left value stays at the value from the moment the updateTo gets called.

 

I really hope someone can help me, i'm pretty new to animating with Greensock.

 


var objectwidth = $("#object").width();
var objecttween = TweenMax.to($("#object"), 1.5, {css:{left:-objectwidth}});


$(".widthswitch").click(function () {

var newwidth = $(this).width() + objectwidth;
$("#object").width(newwidth);

objecttween.updateTo({css:{left:-newwidth}}, false);

return false;
});

 

Edit:

 

updated blogtween to objecttween, as it should be in the first place

Link to comment
Share on other sites

Hi and Welcome to the GreenSock forums,

 

That's an interesting challenge. The code you provided is a good start. In order to provide efficient help please provide some files that we can test. Just include the minimal amount of html, css and javascript necessary to replicate the problem.

 

Right now, from the code you provide its difficult to visualize and test a solution. Not so sure what blogTween is. In short its much easier to offer solutions if we can see the code in action.

 

You can zip files and attach them to this post using "more reply options".

 

Thanks

Link to comment
Share on other sites

Great. Thanks. One thing though. Despite using Superscrollorama in the title of this thread, I missed that point completely when reading your question and code. My bad.

 

If at all possible please try to replicate your problem outside of Superscrollorama. We aren't yet experts on how that all works or how to troubleshoot issues that may come up when using it.

 

Superscrollorama wasn't designed for "responsive" design so I'm not so sure how easy it will be to tweak its internal timeline after it has been built.

 

Perhaps it will be easy, just want to let you know that we are much better suited to work out issues when they aren't tied to 3rd party tools.

 

Looking forward to seeing what you come up with.

Link to comment
Share on other sites

Sorry, i couldn't manage to break this section down for jsfiddle, the Main-Code is here (the Blog Section): http://apprime.info/wip/ (So you can see what i really trying to do - very WIP with lots of outcommented lines)

 

I know that superscrollorama is pretty experimental, and i also haven't seen a site with horizontal scrolling so far. I am pretty sure it has something to do with the scrolling, clicking the button when beeing at the start of the animation works well, but scrolling to mid or so, breaks everything.

Link to comment
Share on other sites

Hi,

 

I'm assuming that you're using srcoll triggered tweens, rigth?, if that is the case, have you tried using eventCallback method to see if you can get the values back to what you need?. Try using an onreverseComplete, in order to see if when the tween goes back to the starting pointyou can set the original values:

 

var tn1 = new TweenMax.to(elem, 1, {css:{left:-newwidth}, onreverseComplete:revComplete}),

function revComplete()
{
TweenMax.set(elem, {css:{width:originalWidth}});
tn1.updateTo({css:{left:-originalWidth}});
}

 

Also you could try using onUpdate in order to call a function with some conditional linke to the tween progress in it:

 

var tn1 = new TweenMax.to(elem, 1, {css:{left:-newwidth}, onUpdate:updateFunction}),
tn1Progress = tn1.progress();

function updateFunction()
{
if(tn1Progress == 0)
{
TweenMax.set(elem, {css:{width:originalWidth}});
tn1.updateTo({css:{left:-originalWidth}});
}
}

 

Also i went to the site you set up and in the only element and in the blog element i couldn't click on anything, the element that accepts a click is on the top and just tween the butterflys to the sides.

 

Hope this helps,

Cheers,

Rodrigo.

  • Like 2
Link to comment
Share on other sites

I tried both methods but when the tween is updated the start position is was changed, so reverse scrolling goes way too far.

 

The API Doc states "Beware that if start values are adjusted, reversing the tween will not make it travel back to the original starting value." for the setDestination() method but not for updateTo.

 

However resetDuration is set false for me: tweening property's starting value will be adjusted so that it appears to seamlessly redirect to the new destination value.

 

Is there anyway to stop the tween from resetting while just changeing the end value?

Link to comment
Share on other sites

Hi,

 

Actually the api docs said that

 

If the resetDuration parameter is true and the tween has already started (or finished), updateTo() will restart the tween. Otherwise, the tween's timing will be honored. And if resetDuration is false and the tween is in-progress, the starting values of each property will be adjusted so that the tween appears to seamlessly redirect to the new destination values. This is typically not advisable if you plan to reverse the tween later on or jump to a previous point because the starting values would have been adjusted.

 

Try the invalidate function, take a look at the docs http://api.greensock...ml#invalidate(), that at least didi the trick in one example I've made, you can check it here http://jsfiddle.net/rhernando/SbpPj/.

 

Now Jack and/or Carl a question, in the fiddle mentioned above when you start the tween and click on the blue div while is tweening the element grows and tweens to the new position as expected, but when you reverse it the start position of the tween changes, if the current values of the tween are honored and later you have an updateTo function that changes those values when the tween reverse is completed, why this happens?, I'm missing something?, i know it says that is not recommended but that is why i putted that function when the reverse is completed to restore the vars of the tween again, then when you tween it again and then reverse it, it should go to the starting point, and that updateTo is not having the desired effect.

 

Cheers,

Rodrigo.

  • Like 1
Link to comment
Share on other sites

Hi,

 

Me again, it kept going in my mind the starting point thing, have you tried with a fromTo tween, if you change that value in my fiddle it seems to work:

 

var tn1 = new TweenMax.fromTo($("div#div1"), 1,{css:{left:0}}, {css:{left:'-' + width1 + 'px'}, paused:true, onUpdate:tn1Update, onreverseComplete:tn1RevComplete});

 

And also solves the problem of the question i asked Carl and/or Jack, it doesn't look pretty but it gets done. In that matter the question still stands guys, i hope you can give me some lights in that regard.

 

Cheers,

Rodrigo.

  • Like 1
Link to comment
Share on other sites

I played around with your fiddle and managed to behave like i want my scroll tween to behave. Maybe it's because of superscrollorama but the t1RevComplete Callback won't start at the origin start value. However i made an Callback that invalidates the tween when the left position is equal or bigger than zero. It's not perfect but gets close to what i want to.

 

Thank you very much rhernando!

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