Trigger animation based on CSS Property Change

[WilliamBay 14 Likes (Newbie)]

I am working on an animation ( makeItRain ) right now that takes a number of photos and moves them across the screen from left to right, using the Left property.
What I'd like to do is trigger a secondary animation (branchDraw) when one of the images reaches Left:30vw; 
I've looked into eventHandler, but that doesn't have a handler based in CSS updated properties.

Where should I be looking for this kind of trigger?

My code for reference. My project is local, but if I need to, I can put together a Pen. 
branchDraw is the function to trigger when one of my rain elements hits Left:30vw;

 

function makeItRain(branches) {
	var rain = document.querySelectorAll('.home-rain');

	for (var i = 0; i < rain.length; i++) {
		rain[i].style.setProperty('top', Math.floor(Math.random() * 80) + 'vh');
		rain[i].style.setProperty('left', Math.floor(Math.random() * -100) + 'vw');

		rain[Math.floor(Math.random() * 10)].appendChild(branches);

		var tl = new TimelineMax({ repeat: -1 });
		tl
			.set(rain[i], { top: Math.floor(Math.random() * 70) + 'vh' })
			.to(rain[i], 30, { left: '150vw', ease: Power0.easeNone }, Math.floor(Math.random() * 20));

		var tlBranches = new TimelineMax({ paused: true });
		tlBranches.call(function() {
			branchDraw();
		});

	}
}
makeItRain();

 

[OSUblake 9,990 Likes (Superhero)]

I can't recommend using left and top. Using x and y is much better. If you want it responsive, use the ModifiersPlugin and animate everything as a normalized value, i.e. a ratio.

 

You're using a linear ease, so you can calculate the EXACT time your object is at 30% of the screen width. Simplified demo using the ModifiersPlugin.

 

See the Pen BYpbEv by osublake (@osublake) on CodePen