You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Inspired by the recent adverts from a certain fruit named company 😅
Love these types of advert. Whenever I see them, I'm inspired by the challenge of trying to recreate them. This one's a little tricky and requires calculating the positions of various pieces that need to be duplicated etc.
That's because we can't animate part of the SVG outside of its view box. That means we have some options. Here we duplicate the SVG and remove the parts that won't be moving. That way we can layer all of the SVG on top of each other and move them separately. The crane strings are then positioned against the nested moving parts of those duplicate SVGs.
The trickiest part is keeping things responsive to viewport changes. To do this we invalidate and kill the current timeline on window resize. We then generate a new timeline resetting all of the DOM elements and calculating new positions.