Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Trigger animation based on CSS Property Change

Recommended Posts

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 });
			.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() {



Link to comment
Share on other sites

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




  • Like 6
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.