Jump to content
Search Community

Dynamically set values to timeline when timeline started (not created)

blindbeat test
Moderator Tag

Recommended Posts

Hello. 

I have my website page split into 5 panels, each panel has the character animated, and every panel has a timeline with scrub: true which animates the character (works with sprite sheet and moves the character around the screen). 

Problem is, my character moves dynamically. 
I want to do something like

      timeline.fromTo(
        '#char-comet',
        {
          ...calcPositionDifference(
            '#char-gravitation-satellites',
            '#char-comet',
          ),
        },
        {
          x: 0,
          y: -100,
          duration: 3,
          delay: 0.5,
        }
      );

calc position difference just calculates the difference between getBoundingClientRect() for two models. 

 

Problem is that timeline values, "from" values exactly, are calculated when animation is created (on page load). I want them to be calculated when the exact tween is fired (so when the timeline on panel 3 starts in this case), So 'from' values would be when the previous character sprite is right now to prevent 'tearing' 

It's very hard to calculate it in advance because character moves are adaptive. 

Link to comment
Share on other sites

Hi @blindbeat and welcome to the GreenSock forums!

 

It's really hard for us to spot any issues without a minimal demo.

 

The only idea I can offer you is using function based values or create your GSAP instances on the fly based on events (like click or other event, if that's a possibility).

 

For using function based values the function will receive three parameters depending if the element is a single element or an array/node-collection:

gsap.to(".class", {
    x: 100, //normal value
    y: function(index, target, targets) { //function-based value
        return index * 50; 
    },
    duration: 1
});

Hopefully this helps and clear things up. If you keep having issues remember to include a minimal demo.

Happy Tweening!

Link to comment
Share on other sites

10 hours ago, blindbeat said:

Problem is that timeline values, "from" values exactly, are calculated when animation is created (on page load). I want them to be calculated when the exact tween is fired (so when the timeline on panel 3 starts in this case)

 

Have you tried adding immediateRender: false to the "to" vars? 

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