Advanced parallax question

[gregoryalexander77]

On the 2nd screen of my first greensock site (gregoryalexander.com)- I created a vector image and broke it down into 6 layers to create a parallax effect- also commonly known as the firewatch parallax effect. I created vector image of the Delicate Arch in Utah, it works really well on both motile and on desktop. However, can I take this even further? I want to know if I can animate the upper two birds about every 10 seconds or so? Is there a delayed animation mechanism that I could use within two different greenscock themes? In the current site, I have the delicate arch scene embedded into a parent scene. My goal is to somehow to keep on creating interest the longer that they look at it, and do something kind of unexpected. I am an amatuer here, but I have designed and developed websites for over 23 years, and have a degree in computer graphics and animation 25 years ago. 

See the Pen by (@) on CodePen

[gregoryalexander77]

Oh great, the site does not load with the pen; I guess I need to figure out how to create a pen, sigh? Does this web learning stuff ever end! LOL!

[mikel]

Hi @gregoryalexander77,

 

Year, a codepen would be great. But please no whole site, only a reduced case, a section with the most necessary code.

 

Here are some gulls ...

 

See the Pen JyOPEw by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

 

[gregoryalexander77]

Oh cool! Dumb question- what is this animation technique called? Just delayed?

[mikel]

 

The GreenSock MorphSVGPlugin morphs SVG paths by animating the data inside the "d" attribute.

Here the two gull shapes so that the wings 'move'.

 

'.staggerTo' tweens let the seagulls fly back and forth at different times.

 

Try it ...

Mikel