midnightgamer

1 hour ago, mikel said:

Hey Zach,

 

Thanks.

 

 

 

 

 

Thanks It is exactly what I was looking for.

Hello everyone, I am fairly new with GSAP and ScrollTrigger as well. What I want is I have a div with some  text in it I want to center it as user scroll it and later when it is center I want to expand it's height and width to cover whole viewport.

See the Pen JjXqMaR by midnightgamer (@midnightgamer) on CodePen

I new in GSAP and trying to learn it by cremating new sites.

What problem I am facing is I have 4 section and I am using fullPage.js to scroll 1 section at a time. I am using gsap to animate some elements. But all elements are getting animated. I want to stop it. Anyone help me thanks in advance,

https://codesandbox.io/s/pedantic-mestorf-d8znp?file=/src/App.js:389-412  Sandbox 

I am trying to learn GSAP by making project. I had create this project Hosted site. I am using Farmer motion and GSAP. I added page transition but when I visit home page again there some animation that wan't to stop. 

git repo

Thanks for help.

10 hours ago, midnightgamer said:

Thanks for  sharing , Liquid effect is just one part of it. I will try to recreate page transition effect and I think that is achievable with GSAP.

10 hours ago, Ihatetomatoes said:

Hi @midnightgamer, great inspiration and a beautiful effect you are trying to recreate. There is not much help I can offer without you posting a Codepen demo or anything to start with.

 

In other words the effect would not involve only GSAP but most likely also a canvas library such as Three.js, Pixi.js or WebGL.

 

You mentioned that you are trying to learn GSAP, but I don't think this effect is the easiest for a beginner.

 

Here are some other forum threads that might steer you in the right direction:

 

 

If you have any questions specific to GreenSock and the syntax, please ask.

Is there any platform where I can learn Farmer Motion?

17 minutes ago, Ihatetomatoes said:

Hi @midnightgamer, great inspiration and a beautiful effect you are trying to recreate. There is not much help I can offer without you posting a Codepen demo or anything to start with.

 

In other words the effect would not involve only GSAP but most likely also a canvas library such as Three.js, Pixi.js or WebGL.

 

You mentioned that you are trying to learn GSAP, but I don't think this effect is the easiest for a beginner.

 

Here are some other forum threads that might steer you in the right direction:

 

 

If you have any questions specific to GreenSock and the syntax, please ask.

Thanks for  sharing , Liquid effect is just one part of it. I will try to recreate page transition effect and I think that is achievable with GSAP.

I am trying to learn GSAP by creating new project. I chose to recreate https://dribbble.com/shots/14108886-Sculpture-Homepage-Concept this animation. I need help to recreate the liquid effect on video and image reveal.

1 minute ago, Ihatetomatoes said:

Hi @midnightgamer, why don't you simply use the document.querySelector?

 

const c = 3;
const child = document.querySelector(`.box:nth-child(${c})`);
gsap.to(child, {duration: 1.4, width: '100%', ease: "expo.inOut", stagger: 0.4});

Here is CodePen demo:

 

See the Pen

See the Pen bGpqxrx by ihatetomatoes (@ihatetomatoes) on CodePen

by ihatetomatoes (@ihatetomatoes) on CodePen

 

 

You should also use the new GSAP3 syntax gsap.to

 

Hope that helps.

Ohh, Yeah Thanks It worked. By the way I am huge fan of your work saw some videos on YouTube.

I am trying animate child of element dynamically on button click.

Here is the code for selecting the nth-child

I am passing ${c} as parameter to function.

var child = CSSRulePlugin.getRule(`.main-overlay .child:nth-child(${c})`)
console.log(child)
TweenLite.to(child, {duration: 1.4, width: '100%', ease: "expo.inOut", stagger: 0.4})

But child is undefined, What is wrong with my code? 

4 minutes ago, Richard1604 said:

Hi midnight gamer,

 

you could  try using unsplash.com or another of the free picture  sites like lorry.picsum that serve up Random images On demand instead of loading up your assets into codepen.
i think that would  help explain your issue more clearly.

 

Thanks for taking efforts, But I have solved the problem. But can you guide me how can I install and  use CSSRule  plugin.

I am fairly new in GSAP animation. I am trying to recreate landing page and animate it through gsap to learn it better. What I want to there is two layers of slide changes. The one appear after page load I want to execute that when I click next button.

I can't provide codepen link as I am using some assets.

https://the-flash-sale.web.app/

Thanks for help.