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

[blindbeat 0 Likes (Newbie)]

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. 

[Rodrigo 5,407 Likes (Superhero)]

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!

[GreenSock 18,577 Likes (Superhero)]

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?