Nekorin

Been scouring the net for solutions to prevent gsap from converting vh units to pixels when animating with scrollTrigger. Ended up using custom css variables which did the trick. It doesn't look elegant but it works. CSS .attached-mastheadtitle { --npos: 0; --nposvh: calc(var(--npos) * 1vh); transform: translate3d(0,var(--nposvh),0); } JS var nx = gsap.timeline( { scrollTrigger: { trigger: '.section-masthead', scroller: scrollname, scrub: true, start: 'top top', end: 'bottom top' } } ) .fromTo('.attached-mastheadtitle', {'--npos': -60, color: '#ffffff' },{ '--npos': 0, color: '#5A6651' },0); With this I don't need to worry about the animation "running out of the intended position" whenever the user rotates his/her iPad while browsing the website.