[Help - Page Transitions (GSAP + barba.js + wordpress)]

help me and recommend any online courses that teach advanced GSAP, thanks.

 

Like this site:

https://alfacharlie.co/

[Help - Page Transitions (GSAP + barba.js + wordpress)]

ZachSaucier and Dipscom, thanks for feedback. 

 

I thought someone could have had the same problem using barba.js, GSAP and wordpress, because I see many sites that use GSAP with page transitions, I will keep searching.

[Help - Page Transitions (GSAP + barba.js + wordpress)]

Hi guys! I'm learning GSAP a few months, with the help of community, this is my first work using GSAP, in progress yet.

 

 

Thanks all for help! And i have another  question, about page transitions, shared element transitions between pages.

 

See website reference at link: 

https://alfacharlie.co/

 

See the effect of transitions between pages, the softness the animations. 

I used the barba.js in html + css and it worked, but not working fine in wordpress, someone to help me achieve page transitions in wordpress site?

[How animate a text with gradient]

On 6/30/2019 at 1:16 PM, mikel said:

Hi @clickdeproduto,

Hi Zach,

 

To use SVG is super ...

 

 

 

 

Happy tweening ...

Mikel

 

 

 

Good job mikel, thanks for help!

[How animate a text with gradient]

On 6/30/2019 at 3:04 PM, PointC said:

Yeah, JavaScript isn't gonna have any magic way of making the gradient cross-browser. Getting that to work correctly in all browsers could be a bit tricky. @mikel's approach with SVG paths would work well and you should see consistency across the browser spectrum.

 

If you want actual SVG text, you can do that too. You could use <tspan> elements, but animatable properties will be limited. I'd recommend placing each letter in its own <text> element. It's more work to manually do that, but it should work everywhere.

 

 

 

 

If you don't like the manual approach, I made this demo to show how to break strings into SVG <text> elements. It's overkill for what you're doing, but maybe it'll give you some ideas.

 

 

 

 

SVG text animation is not without its caveats though. getBBox() isn't accurate for vertical measuring due to font ascent, descent and the other font metrics, but that's a post for another time.

 

Hopefully that helps a bit. Happy tweening.

 

 

Thanks for the help, I'm going to give you still pride  

[How animate a text with gradient]

On 6/30/2019 at 10:20 AM, ZachSaucier said:

You could look into a polyfill for old browsers that don't support background-clip: text; Otherwise you would have to use a different approach, like using SVG or canvas. I didn't look into the support tables to see which approach has the best support. But GSAP can animate those just fine.

 

SVG demo: 

 

 

 

 

Thanks man :  )

[How animate a text with gradient]

7 hours ago, elegantseagulls said:

Hey,

 

I made a light-weight polyfill for something similar (text images) a bit ago that could easily be adapted to work with gradients.

 

 

Hi elegantseagulls, very cool, but I still do not understand how pollyfill works, but it's something I'll study.

[How animate a text with gradient]

11 hours ago, Jonathan said:

 

What specific browsers and browser versions are you trying to target?

 

Hi Jonathan, I would like it to work in the main browsers, chrome, firefox, safari and edge. I could actually use a pollyfill for versions of browsers that do not give this support, but I still do not quite understand wel how to use pollyfill.

[How animate a text with gradient]

 

Thanks everyone for the help, I will study the best solution for my case, I am studying GSAP more and more, my goal is to make amazing websites in the near future.

[How animate a text with gradient]

23 minutes ago, ZachSaucier said:

Things like background-clip and text-fill-color are CSS properties - there's no way to do things like that in JavaScript alone (you always need some HTML and CSS along with JS to view it in a browser). You could set those properties with JS/GSAP if you'd like to, but it's up to you whether you want to set those properties in your JS or CSS.

 

 

yes, I was looking for a solution for gradient text without css, just with javascript, so that it would be compatible with older browsers, the animation only worked in firefox in version 67.

[How animate a text with gradient]

Hello PointC, sorry for my explanation. What I wanted to say was: Is it possible to do the gradient in the text without using the CSS: 

 

-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

 

Using only GSAP for the gradient. 

[How animate a text with gradient]

22 minutes ago, ZachSaucier said:

Hello and welcome. In what way are you wanting to animate it?

 

Thanks Zach! 

A friend helped me, but it works fluid only in chrome, any idea for running fluid on firefox too?  

Is there a way to get this done only with GSAP?

 

See the Pen jjZWJV by rhcarlosweb (@rhcarlosweb) on CodePen

[How animate a text with gradient]

Hello everyone, how can I animate with GSAP a gradient text using the css code below? Or some other way.

 

background: linear-gradient(to right,#3b1c52 50%,#b51a84 80%);

-webkit-background-clip: text;

-webkit-text-fill-color: transparent;

 

See the Pen EBQxEK by BrunoMarcorio (@BrunoMarcorio) on CodePen