Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Chriz

Simple Gsap replace images

Recommended Posts

HI Gsapers ;)

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

gsap.from(".ux2"3, {autoAlpha:1delay:4}, {autoAlpha:0repeat:-1delay:4})
gsap.to(".ux"3, {autoAlpha:0delay:4}, {autoAlpha:1repeat:-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 :)

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

gsap.timeline({repeat:-1yoyo:true})
.from(".ux2"3, {autoAlpha:1delay:1}, {autoAlpha:0delay:2})
.to(".ux"3, {autoAlpha:0delay:1}, {autoAlpha:1,delay:2})

Share this post


Link to post
Share on other sites

Hey Chriz. It's unclear what you're actually trying to achieve and what your solution was. Generally it's helpful to have a minimal demo exemplifying your issue and solution. Would you mind adding that so anyone coming across this thread may be helped?

Share this post


Link to post
Share on other sites

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 ?

Share this post


Link to post
Share on other sites
33 minutes ago, Chriz said:

he result is here where i am working https://produits-locaux-rennes.fr/refonte/

Thanks, but that's not really too helpful. There's a lot going on and your webpage is likely to change in the future which would make the webpage not relevant to this thread any more. We recommend using CodePen to show problems and solutions for forum posts:

 

25 minutes ago, Chriz said:

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 ?

Please make a minimal demo of this issue as described above :) It will make it much easier for us to help you. 

  • Like 1

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
1 minute ago, Chriz said:

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

Look in your dev tools console. There's a bunch of 404 errors. I highly recommend watching the video in the linked thread about making a demo on CodePen to learn how to include external assets.

Share this post


Link to post
Share on other sites

better now i think ?

Share this post


Link to post
Share on other sites
14 minutes ago, Chriz said:

better now i think ?

Yes, good work.

 

1 hour ago, Chriz said:

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 ?

Yes, that's a CSS issue. Out of scope for this forum. But you should consider structuring the position to be based on the container. You could use SVG to do that or you could use one of the techniques that I outline in this post: https://css-tricks.com/scaling-responsive-animations/ The section on "Adaptive scaling" might be the best one to use in your case? Depends on your needs.

  • Thanks 1

Share this post


Link to post
Share on other sites

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! 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×