FLIP animation not starting at the right initial state (wrong vertical position)

[stankur]

Hi there, I was working on a flip animation across two distinct components where there are a group of elements that are flip-ed across these components. The two components represent two distinct "pages", one is for 'dual-view' and the other is for 'single-view'.

The two components have heights larger than the viewport. Hence, we can scroll vertically for each of these components.

 

I noticed that when I don't scroll before triggering the animation, the animation worked perfectly fine, but when I gave it some vertical scroll before triggering the animation, the elements didn't seem to start at the expected positions. Seems like scrolling messed up the starting position of my flip animations. 

 

I attach a minimally relevant REPL that I recreated from scratch and also a video explaining the problem. I hope it makes the problem clearer.
 

https://svelte.dev/repl/6fde0174bda140c78b5f9ccf6b9238c5?version=4.2.18

 

What might be interesting to note is that when I tried to see what I got from calling flip.getState() just before starting the flip animation, the bounds data for all the elements are right. In particular the y data are spot on. So, I am confused how come the animation doesn't seem to start from that recorded position.

I tried to give a translate of -window.scrollY for the elements using gsap.set(targets, {y: -window.scrollY})  like so, as suggested here https://gsap.com/community/forums/topic/39827-nuxt3-flip-animation-between-pages-ignore-scroll-position/#:~:text=gsap.set('.el'%2C { y%3A -window.scrollY }) , but it doesn't seem to make the animation start at the right position either. 

 

----------------------------------------------------------------------

Somewhat a distinct problem, but I am wondering if I could get some good starting idea here.

As you can see, the paragraphs shift when switching between views. I want to be able to "follow" a specific paragraph when the transition is happening. So, during the flip animation, I want exactly one paragraph to stay fixed in the viewport (more specifically, one has a constant y position from the top of the viewport), and the all the others could move freely, either converging to, or diverging away from that "frozen" paragraph. 

If such functionality is possible, it would be really great for my use case, and I'd be even more amazed by this elegant library.

Thank you!

 

[Cassie]

Hi there!

At the moment if you log out the scroll position before and after the flip, you'll see that it stays the same. The scroll is staying in the same place but the content itself is moving.

 

Maybe you could add anchor links onto the titles so you can query the DOM and get the before and after position of which element you want to 'track' and then use scrollTo to animate the position of the window? https://gsap.com/docs/v3/Plugins/ScrollToPlugin/ I haven't seen anyone do something like this before though, might need a little experimentation to get it to work.
 

async function toggleView() {
		console.log(document.documentElement.scrollTop)
		isDualView = !isDualView;
		
		const initialState = Flip.getState(data.map(({ref}) => ref), {
			props: "fontSize, lineHeight"
		})
		
		await tick();

		Flip.from(initialState, {
			targets: data.map(({ref}) => ref),
			props: "fontSize, lineHeight",
			duration: 0.2,
			absolute: true,
			onComplete: () => {
				console.log(document.documentElement.scrollTop)
			}
		})
	}

 

[stankur]

I tried logging the scrollTop similar to how you did:


When I start from the "single view", then I give the document a vertical scroll and I switch to the "dual view", yes, the scrollTop stays constant.

 

However, it doesn't seem to be the case when going the other way around from "dual view" to "single view". For instance, this is what I got:

So, going from the "dual view" to "single view", it seems like the scrollTop jumps as soon as the flip animation starts, but remains the same until it ends. But from that observation, I was able to make it start properly by adding this to the Flip.from second parameter, where before is the value I log for "before switch: ":
 

            onStart: () => {
                gsap.set(document.documentElement, { scrollTop: before})
 

            },


Now, I am going to try out the scrollTo plugin for following a paragraph through the transition as you suggested. Thanks for your help!