Animation problem

Design help General
1

I’m working on my new portfolio, and I have an animation that occurs when you select a project to view, and go back.

I use the same animation to change views from back to forth, but for some reason when I select a project to view there is a little “jerk” and instead of transitioning the opacity from 0%-100%, it just happens.

I use the same animation for going back screens which works fine, but going into a project has this “jerk”.

I can’t figure this out, any help would be much appreciated!

Here is my site Read-Only: https://preview.webflow.com/preview/brooksportfolio?preview=be5d332abbe571a18ca3255500313594

2

I’m not seeing any un-smooth animation. The opacity seems to work fine for me.

3

When you click on “Work Projects” a modal with projects to select will come up.

Selecting a project will have the “jerk”.

Try selecting a project, then pressing the back button in the top left corner of the modal to go back to the project selection.

You will notice that going back is much smoother then going into a project.

4

It looks perfectly smooth on my screen:

animation-is-smooth
animation-is-smooth1318×773 1.18 MB

5

I can’t tell from your video as the framerate is very low… but I’m seeing a jerk on macOS, Windows 10, iPads, and iPhones.

6

On my end the opacity change back and forth is perfectly smooth. No difference on my end. I am running Mac OS Sierra 10.12.6, Chrome Version 62.0.3202.75 (Official Build) (64-bit)

7

And it looks correct for you on your phone as well?

8

I assume Trice means that when you load the popup it changes opacity smoothly (but is empty) but then the actual image pops up at once. When you close the modal everything just disappears smoothly at the same time.

9

The modal comes up smoothly, but when I select a project to view, I see the project container at the bottom of the modal for a split second, then it just shows up instantly instead of smoothly gaining opacity.

This does not happen when going back to the project selection.

10

Then I assume only you are seeing this :smiley: You may want to post video capture to make it clear.

11

I’m not sure how to capture it in a video (Just at work now) but if someone could post a higher frame rate video of the switch then I could see it and comment. DFerro’s video is what I’m talking about but I can’t tell as the quality is a bit low.

12

I fixed the issue… a simple mistake.

The containers that I have going from 0% - 100% opacity did not start at 0% opacity.