Yakov

Hello everyone!? Can you tell me how to use GSAP to implement such an svg animation when scrolling? https://en.soplyam.net/ Thanks ?

I tried to make your example from codepen to begin with, just transferring it to the site, I connected all the js, and inserted the codes, but nothing worked for me. Although banal https://vuejs.org/v2/guide/#Declarative-Rendering it works. So vue connected correctly

Is it possible to do this in codesandbox? Just a question, how to combine this with the transition? Let's say I don't understand the principle itself, how these two functions are combined. I have never worked with either Vue or travelapp

Hmm... I can't find it, can I connect it with files without npm? How does it work with xslt queries?

Good afternoon. I managed to make a transition animation when clicking on "Back", but when clicking on a link with index.html it is not possible to implement flip. In Slack Barba, only one person answered me, but he says that barba is not very good... But it turns out to make an animation in the cover__div block... P.S.: codesandbox why doesn't it work out the transition here... https://codesandbox.io/s/withered-river-i8cqs?file=/index.html Maybe there is really some option with another plugin for the transition? ?

Very interesting, I realized that js barba periodically falls off when it is connected like this: https://unpkg.com/@barba/core But when I saved it and connected it locally as a file barba.umd.js, it stopped falling off

Yes, about him. It's just that if codesandbox couldn't work with barba, then the usual opacity wouldn't work, right?

By the way, this code works, but why doesn't the other option work? barba.init({ transitions: [{ name: 'opacity-transition', leave(data) { return gsap.to(data.current.container, { opacity: 0.2 }); }, enter(data) { return gsap.from(data.next.container, { opacity: 0.8 }); } }] });

I have already watched the video, I have practiced doing something from there, taking into account the recommendations of Cassie. And it worked. But here is not a separate working out of flip, namely in the transition. In the gsap topics, I found a description, only according to the old version of barba... I took your example, barba works, but the flip process itself seems to work only at the end, when the page has already opened, there is some flashing of the block on the page. But it does not work during the download process... As in the reference, in it, flip is in the process... https:/ / studio-size. com/ https://prnt.sc/1g61lut - screen Some simple animation of the transition is obtained, but the entire page as a whole, for example, opacity or zoomout, but not a separate block... There is clearly some nuance here that I don't understand and probably just don't know that it exists

Unfortunately, it does not work... Even if I add @id to img in data-flip-id, so that it is different, because img must be different in this data. But it doesn't work out... And on pages like cases.html there should be such a block... There may be a video inside the div.bgimage_block. Therefore, there is a block there. <div class="bgimage_block" style="background-image: url(https://img2.goodfon.ru/original/320x240/1/a1/bow-lake-banff-national-park.jpg); "> </div> Barba work, but without animation..

I made a project using your link! How to connect barba via beforeLeave/leave with Flip, so that it is like in the given reference in the topic? https://codesandbox.io/s/pedantic-lake-sh77z?file=/index.html:2921-3313 I worked with before in the Fullpage plugin once, but I suffered for three days then... I haven't found an example working on this functionality yet..? It feels like I'm missing some theoretical point in the stage, and because of this there is a deadlock...

It seems that I tried to make a project, but she tells me that the Trial version of GSDevTools is deployed... https://codepen.io/eglit_m/project/editor/Abayny

That's just how I can't understand the beforeLeave/leave principle... How to link it ?

By the way, I was able to connect barba, I thought I read that it is well compatible with gsap, but I can't figure out where to attach the animation yet... And I'm not lucky with examples =_= I found a description here, but with an old version of barba...

In fact, not quite this, I need to implement the transition effect, as given in the reference at the beginning of my question topic. That when you click on a block in which there is some image with a link, when you click on it, a transition occurs, another page opens. I need to hang the flip effect on the page transition somehow. Gsap is still difficult for me, it was more difficult to work only with threejs.