[Morphing Page Transition]

On 4/22/2020 at 4:58 PM, Kovsky said:

ok thank you ^^ good bye to those 3hours then 
For the moment my bank account display -850€ 

But when i will be back on tracks, i will definitely consider this option

good luck about this hard time... 

[How to manage GSAP animation in mobile device]

MANY THANKS ! 

[Simple Gsap replace images]

I will need nav menu, overlay nav bar, "one page scrolling effect" for differents section2, and full page SVG morph on links... while learning ... I have lot of job!

It would be nice to have a basic skeleton of these basic elements for all modern websites
if you know any, I'm open with it! 

[Simple Gsap replace images]

better now i think ?

[Simple Gsap replace images]

done Zach  (my CSS svg dont load, idk why) ...

[Simple Gsap replace images]

the problem i have now is that the text "Design Applicatif Développement" is not moving the same way than my biger text "Rennes internet" when i change viewsize.. its a css problem... should i not use CSS to position them and use instead Gsap to position them both ?

[Simple Gsap replace images]

Hey Zach ! The result is here where i am working https://produits-locaux-rennes.fr/refonte/

[Simple Gsap replace images]

i'm proud i solution it alone, with google help ^^

gsap.timeline({repeat:-1, yoyo:true})

.from(".ux2", 3, {autoAlpha:1, delay:1}, {autoAlpha:0, delay:2})

.to(".ux", 3, {autoAlpha:0, delay:1}, {autoAlpha:1,delay:2})

[Simple Gsap replace images]

i think i should must use timeline to do a repeat loop...

[Simple Gsap replace images]

HI Gsapers

still learnin, i'm doing a sort of slide, auto, with that code :

gsap.from(".ux2", 3, {autoAlpha:1, delay:4}, {autoAlpha:0, repeat:-1, delay:4})

gsap.to(".ux", 3, {autoAlpha:0, delay:4}, {autoAlpha:1, repeat:-1,delay:4})

It works not bad, but i'm sure its not the good way to do this... it should just replace ".UX2" by ".UX" using opacity...

thanks for you help

[Loop or repeat a few items]

ok just find the error, its was on the js :
ease:SlowMo.ease.config(0.01, 0.7, true)});
dosnt match
i use instead : ease: "slow(0.3, 0.4)

and its ok

[Loop or repeat a few items]

Searching by myself, i just found this Pen 

See the Pen qBdrqWm by christophe-sansonetti (@christophe-sansonetti) on CodePen

 

I edited the code on Pen, it works fine, exactly the animation i need,  but when i test it on local it dosent work

[Loop or repeat a few items]

Hello

As you can see on the Pen I have Balls items. I would just like these balls to magnify a little bit and infinitely, in a loop, I tried to reproduce this code found on this forum but obviously it does not work
Thank you for your suggestions.

See the Pen ZEGepXd by christophe-sansonetti (@christophe-sansonetti) on CodePen

[Parallax and Libs]

Many thanks i will inspect this example

[Parallax and Libs]

It should be possible to only use Gsap to do a similar parallax effect i think ? Its finally just a different scroll value from background or other elements ...

[Parallax and Libs]

i just reinstall my W10, i've done several privacy tweaks on the other, using OOSU10... then now i can see the animation pretty good !

[Parallax and Libs]

Hi!

Sorry this for the (sure noob again) question but i try to folow this example to create a parallax effect of a creation i have in mind, but it just normally scrool the page, what am i missing ?

ps. i add <script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.0/gsap.min.js'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.js'></script>

in my index.html but it change nothing

See the Pen dBdogo by PointC (@PointC) on CodePen

[Creating a full-page morph transition]

3 hours ago, Shrug ¯\_(ツ)_/¯ said:

Hi @Chriz welcome to the forum.

 

I see you bumped another thread asking for examples. In case you were unaware the video series you posted above has a link to download the working files in the description (click "show more"). Please note however that the tutorial you referenced uses the older version of both GSAP and Barba. So if you are just getting started on your journey with each, then I would highly suggest using GSAP 3 and Barba v2.

hi Shrug thanks for your reply, yes i understand what you say, by replacing the older js lib... i will look at this base to learn a few more about how it works.

[Creating a full-page morph transition]

Thank you, sorry yes I was looking for a tutorial where I would just have to copy paste the code to advance on my project ... I can't wait to redesign my WP site that's why but it's true that it does is not the best method for learning. I will proceed step by step especially if you are ready to help me it is very kind to you.

[Page transition with GSAP and Barba.js]

Hi guys! Could it be possible to see a link or something it can help me to do the same ?

[Creating a full-page morph transition]

just find a tuto to follow, if it can help others  

 

[Creating a full-page morph transition]

your advice step by step seems to me very well, it just seems technically difficult for my level
I could follow Mikel's codePen to start but his example works on the same page I think. Where would you direct me to start?

[Creating a full-page morph transition]

Many many thanks Zach ! _/\_ 👋

[Creating a full-page morph transition]

perhaps i mistake, but if you click on links on nav top here, you can see what i'm looking for https://www.beangels.eu/fr

i tought the whole section, of main, done a morph... 

[Creating a full-page morph transition]

Hi Zach! Many thanks for your reply. Yes i will learn thoses tutos before anything, i already done a litle project on looking a tuto on youtube as you can see here https://www.produits-locaux-rennes.fr/

not fabulous, its just a start. I prefer doin tutos with a project on the air it really enthousiam me, than i'm not a young guy, 52, and lazy but following a tutorial that I really need, like the transition morphing from one page to another, gets me so excited that I learn 10x faster than learning rudiments from B to BA ;)

If you know one doin exactly this i will pay you a cofee or a whisky as you prefer !