I figured out my problem. The issue was that the onUpdate callback does not fire if the scroll animation hasn't started or has already ended. To fix this, I needed to add the onStart and onEnd events to update the styles as well. The fixed version can be seen below.
ctrl._animateIconContainer = function () {
var headerHeight = angular.element('.header')[0].offsetHeight;
var startY = ($window.innerHeight / 2) - headerHeight;
var tl = gsap.timeline({
scrollTrigger: {
trigger: ctrl._shareIcons,
toggleActions: "play none reverse reset",
start: `${startY}px center`,
end: () => '+=298.8',
scrub: true,
snap: false,
invalidateOnRefresh: true
},
});
tl
.to(ctrl._shareIcons, .25, {
onStart: function () { //added this to handle when the animation hasn't started yet
ctrl._setRotation(0);
},
onUpdate: function () {
ctrl._setRotation(this.progress()); //moved the code that was here into its own function
},
onEnd: function () { //added this to handle when the animation has already finished
ctrl._setRotation(1);
}
})
.to(ctrl._shareDiv, .2, { borderBottomRightRadius: '0rem', borderTopRightRadius: '0rem' });
}
//moved animation to separate function to allow it to be used in the 3 event callbacks
ctrl._setRotation = function (progress) {
var rotate = 90 * progress;
gsap.set(ctrl._shareDiv, {
rotation: -rotate,
x: -166 * Math.cos((rotate - 90) * Math.PI / 180)
})
gsap.set(ctrl._icons, {
rotation: rotate
});
}
