sadikyalcin

Hi everyone, This has been asked many times and I've checked most of them but I'm still struggling to get this work. I'm positioning an element on screen and tweening the position on scroll. The initial position depends on the viewport and I would like to make this work responsively as well which is where I'm struggling. I've tried most of the methods I'm aware of but nothing seems to be doing the trick. I simply want to update the `topMargin` variable on resize. var ctrl = new ScrollMagic.Controller() var start = new TimelineMax(); var scene1; var topMargin = 20; function calculateMargin(){ var windowWidth = $(window).width(); if( windowWidth <= 991 ) { topMargin = 90; } if( windowWidth <= 767 ) { topMargin = 125; } foo(); } function foo(){ start.staggerFromTo($phone, 1, { yPercent: topMargin, scale: 1, }, { yPercent: 0, scale: 0.75, opacity: 1, ease: Power4.easeInOut, }); scene1 = new ScrollMagic.Scene({ duration: '100%', triggerHook: 'onLeave', }) .setTween([start, svgTimeline]) .triggerElement( document.querySelector('.hero') ) .addTo(ctrl); } $(document).ready(function() { calculateMargin(); }); $(window).on('resize', function() { // calculateMargin(); // start.invalidate().restart(); // start.kill & calculateMargin(); // start.start(); // start.invalidate(); // start.invaldiate().restart(); });