Works

Hi people on today's episode I tried animating a section I saw on one design studio page, I'll be explaining how I did this below

..After designing the two sections on different frames, I then created another frame and placed the two frames on it. Then exported to Jitter.

The effects I majorly wanted were scaling, moving, and scrolling..

For the first part, I wanted the work to go from 110% to 70% and also make the text disappear at the same time( for this I reduced the opacity )

While all this was going on, I animated the second frame to come up and cover the first one, now I'm left with a frame with pictures in a circular pattern...we've gotten to the tricky part...

I wanted the images to move in a circular way soo...let's go back to Figma

When I was designing the second frame, I made a big ellipse and grouped the image around the ellipse, I also made the ellipse the same color as the frame in order to hide the circle..

now let's go back to jitter...I clicked on the ellipse, then used the rotate custom animation that I had to rotate the ellipse, remember that I grouped the ellipse and the pictures together...so while the ellipse was rotating, the images too were moving with it...buh while doing this the images were moving out of place (it's either the image coming it is moving to the top or the angle was bad..to solve this I moved and changed the angle (using rotate) to make them stay in place ..took me a while to achieve this... almost forgot, I also made the caption on each image to appear when the image is in view (like it's at the center of the frame) I also had animate the cursor to simulate scrolling through the image...For this, I scaled the cursor down to simulate onclick state and scaled it up to simulate when it's not clicked.