Jump to content
GreenSock

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 :)

Link to comment
Share on other sites

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

Link to comment
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})
Link to comment
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?

Link to comment
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 ?

Link to comment
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
Link to comment
Share on other sites

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

Link to comment
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.

Link to comment
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
Link to comment
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! 

Link to comment
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.
×