ScrollTrigger morphing svg

[Apnw2]

Hello,

I'm struggling to morphing an absolute svg to a fixed one.
In my Codepen example I would like the letter "o" in the center of the screen becoming progressively the blue circle in the header but it doesn't work.
 

Some help will be super helpful.
Thank's a lot.

See the Pen wvpWeZv by MaxOlliv (@MaxOlliv) on CodePen

[OSUblake]

Hi Apwn2,

 

The first thing you need to fix to put your ScrollTrigger on the timeline, not the tween. See the Most Common ScrollTrigger Mistakes.

 

The second thing is that you calculations are invalid because you used the wrong names.

 

// let start_rect =    document.getElementById("start").getBoundingClientRect();
// let end_rect = document.getElementById("end").getBoundingClientRect();
let start =    document.getElementById("start").getBoundingClientRect();
let end = document.getElementById("end").getBoundingClientRect();

tl.to("#start", {
  x:
  (end.x - start.x),
  y:
  (end.y - start.y),
  
});

 

The next thing you'll need to work out is the movement. If the page is scrolling, that calculation is going to be off because the blue circle is fixed. You're going to have both elements fixed, or in the same containing element.