Jump to content
GreenSock

gotaquestion

how to label TimeLineMax for each tween

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 an animation that shows outlines of areas for few dates over years.   As I move the slider I want to display an estimated date for each of the tweens. Meaning, if I have shape data for March 2010 and it's tweening to shape data September 2010 then as I move the slider I want to display the dates like March, April, May, June, July, August, September to show up as I slide. It seems like labels might be the answer but I don't know how to attached to each tween. Or maybe it's with the time property? ideas?

 

Here is my code:

 

var tl = new TimelineMax({onUpdate:updateSlider});

tl.to("#March_2010_small", 1, {morphSVG:"#September_2010_small"}, 0)

.to("#March_2010_large", 1, {morphSVG:"#September_2010_large"}, 0)

.add("scene2")

.to("#March_2010_small", 1, {morphSVG:"#September_2011_small"}, "scene2")

.to("#March_2010_large", 1, {morphSVG:"#September_2011_large"}, "scene2");

 

$("#slider").slider({

  range: false,

  min: 0,

  max: 1,

  step:.001,

  slide: function ( event, ui ) {

  

    tl.progress( ui.value ).pause();

  },

  stop: function () {

    tl.play();

  }

});

 

function updateSlider() {

  $("#slider").slider("value", tl.progress());

$("#date").text(tl.time());


Link to comment
Share on other sites

Hello gotaquestion, and Welcome to the GreenSock Forum!

 

Im not near my computer bt take alook at these video tuts by GreenSocks Mighty Carl

 

position parameter taken from to() docs:

  • position : *
    (default = +=0) — Controls the placement of the tween in the timeline (by default, it's the end of the timeline, like "+=0"). Use a number to indicate an absolute time in terms of seconds (or frames for frames-based timelines), or you can use a string with a "+=" or "-=" prefix to offset the insertion point relative to the END of the timeline. For example, "+=2" would place the tween 2 seconds after the end, leaving a 2-second gap. "-=2" would create a 2-second overlap. You may also use a label like "myLabel" to have the tween inserted exactly at the label or combine a label and a relative offset like "myLabel+=2" to insert the tween 2 seconds after "myLabel" or "myLabel-=3" to insert it 3 seconds before "myLabel". If you define a label that doesn't exist yet, it will automatically be added to the end of the timeline before inserting the tween there which can be quite convenient. Be sure to read our tutorial Understanding the Position Parameter which includes interactive timeline visualizations and a video.

GSAP position parameter:

 

 

Sequence Animations like a Pro:

 

 

See TimelineMax Docs:

 

https://greensock.com/docs/#/HTML5/GSAP/TimelineMax/

 

Happy Tweening :)

  • Like 2
Link to comment
Share on other sites

Hi gotaquestion :)

 

If I understand your question correctly, you want the morph animation to play and you want a secondary animation to play at the same time? If that's correct, it sounds like nesting timelines would be the way to go. You'd create a timeline for your morph and a second one with your dates and then add those to a master timeline. 

 

Here are the basic mechanics of nested timelines added to a master:

 

See the Pen obyJEM by PointC (@PointC) on CodePen

 

If you use the forum search feature looking for 'nested', you'll find a lot more examples and threads. If you had a CodePen for us to review, we can probably be of more help. Please see Carl's post to learn more about creating one:

 

https://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

Hopefully that gets you started.

 

Happy tweening.

:)

  • Like 1
Link to comment
Share on other sites

Hi gotaquestion  :)

 

If I understand your question correctly, you want the morph animation to play and you want a secondary animation to play at the same time? If that's correct, it sounds like nesting timelines would be the way to go. You'd create a timeline for your morph and a second one with your dates and then add those to a master timeline. 

 

Here are the basic mechanics of nested timelines added to a master:

 

See the Pen obyJEM by PointC (@PointC) on CodePen

 

If you use the forum search feature looking for 'nested', you'll find a lot more examples and threads. If you had a CodePen for us to review, we can probably be of more help. Please see Carl's post to learn more about creating one:

 

https://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

Hopefully that gets you started.

 

Happy tweening.

:)

Thanks for the nesting idea. I'm going to investigate further. But right now in my mind, that second animation is not really a tween animation. The "second animation" needs to be Text, like "March 2016, April 2016, etc" that is associated with the first animation tween. Getting the currentLabel and then the next one and or a slider value seems to be closer to the solution I need.

Link to comment
Share on other sites

@pointc, I haven't seen that! But now that I have...

I modified the nested example you showed me and added the textplugin and a slider.

Is it possible to make the letters of the text not morph into the next month name?

Is it possible to force the text timeline to finish when the box animation finishes with out assigning a manually value (.5 in this example) for each text animation duration?

 

See the Pen PWNzaN by anon (@anon) on CodePen

Link to comment
Share on other sites

I thought you wanted some animation as the months change, but you just want the months to change based on the progress of the timeline? No animation?

 

If that's what you need, you wouldn't need the text plugin. I'd probably just put your months list into an array and then change the HTML of the h1 span based on the progress of the timeline.

 

We'll start with the array and get its length so we can calculate the timeline progress correctly.

var months = ["April", "May", "June", "July"];
var ml = months.length;

I then added two lines to your updateSlider() function:

function updateSlider() {
  $("#slider").slider("value", maintl.progress());
  var theMonth = Math.floor(maintl.progress() * 100 / (100/ml) );// check progress, convert to integer, round down
  $("h1 span").html(months[theMonth]);// change text in span
} 

The first line gets the progress of the timeline and determines which array text we'll be using. Using the ml variable (length of the array) we can change the text at the correct percentages of timeline completion. For your example, you have four months so the text will change at 0%, 25%, 50% and 75%. You can add more months to the array and everything will still update correctly since we're using the ml variable for our calculations.

 

The second line simply grabs the correct text from the array and updates the h1 span accordingly. 

 

Here's a fork of your pen.

 

See the Pen rjeWBV by PointC (@PointC) on CodePen

 

I also left a console.log() in there to show the percentages as it animates.

 

Hopefully that makes sense and helps a bit.

 

Happy tweening.

:)

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