Obaid Nadeem

Hey @KevinHa, this project looks interesting to me. Let's get on a call if you would like to, I can share my experience and previous projects with you. https://obaidnadeem.com https://github.com/ObaidNadeem Thank you, Obaid.

Hey @Smithfield I have shoot you an email. Looking forward to your response. https://obaidnadeem.com

Looks really amazing John. Thanks for sharing.

Hey @Nerd Your job post seems interesting, would love to know more details about this. https://obaidnadeem.surge.sh

Hey @prjbios , Can you please provide a minimal codepen demo ?

Impressing! I should step up my mathematics game ig XD Just did some minor updates as well: WhatsApp Video 2021-11-09 at 1.29.08 PM.mp4

Amazing! I almost forgot about the stagger function. Thank you for reminding me ?. I was giving delay, but then I realized that the delay will be same for every class. So I used a different variable and increased it in every iteration. Didn't used i because wanted a variable with much lower value. let j = 0.3; useEffect(() => { array.map((item, i) => { console.log(`.char${i}`) gsap.to(`.char${i}`, 1.5, { translateY: "0px", ease: Power3.easeInOut, delay: j }) j = j + 0.3; }) }) This worked for me.

I am working on this dynamic text animation, I want each character to translate one at a time but the whole text is translating at the same time. personalWeb-2021-11-08_17.45.34.mp4 The react code goes like: import React, { useRef, useState } from 'react' import { gsap, TweenMax, TweenLite, TimelineLite, Power3, Power2, Circ } from 'gsap'; import './TextAnimation.css' export const TextAnimation = () => { const [text, settext] = useState("Hello there people") const array = [] for (let i = 0; i < text.length; i++) { if (text[i] == " ") { array.push("&nbsp;"); } else { array.push([text[i]]) } } window.onload = () => { array.map((item, i) => { console.log(`.char${i}`) gsap.to(`.char${i}`, 1.5, { translateY: "0px", ease: Power3.easeInOut, }) }) } return ( <div> <div className="text-container"> <div className="text"> { array.map((item, i) => <h1 className={`char${i}`} >{ item == "&nbsp;" ? <h1>&nbsp;</h1> : item } </h1>) } </div> </div> </div> ) } and the css is: div{ width:100vw; height: 100vh; display: flex; justify-content: center; align-items: center; } .text-container{ width:100vw; height: 100vh; display: flex; justify-content: center; align-items: center; } .text{ height: 3rem; /* background-color: blue; */ overflow: hidden; } h1{ font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; font-size: 3rem; color: #282828; transform:translateY(45px); } How do I fix this ?

Thanks for the complement ❤️ Firefox is constantly working and extending support for SVGs and that's great because it is the future,it's getting attention and hype after all these years, I think it's now time for chrome to extend support for SVG 2.0. Yes, It is pure css. It was a simple animation so I prefer not to use GSAP. This snap doesn't occurs with images tho. Well we should now hope for the best. SVG 2.0 and Webgl 2.0 are future.

Nope, It's pure css. Can be done with GSAP also.

ohhh will be careful next time

yeah I think I shouldn't put that much trust on Wappalyzer

Using webgl for a simple animation like this will not be a wise thing to do. This can be achieved with gif or svg morphing easily.

Very much experienced with scroll trigger after solving uncountable errors while using it. Portfolio: obaidnadeem.surge.sh Email: obaidnadeem4@gmail.com

When transforming 3D using perspective for svgs chrome there is always a bug that I face. For example on this web https://threeedy.surge.sh/ when all the elements are translated in 3D, there is a bug in the where it sticks on awkward positions. And this happens only in chrome , on firefox it stays in 3D transformation. Also in my portfolio web: https://obaidnadeem.surge.sh/ in the User Interface section I have done the same thing but getting the same bug in chrome while the firefox runs everything smoothly. Is their solution to this or am I doing something wrong? or the only solution is to wait until chrome team fixes bug from their end and extend support for Scalar Vector Graphics ?

Amzaing! Watched the stream and learned a lot. Thanks.

Yes I was also confused. But if it was three.js Wappalyzer would have shown it. I think they are using core webgl code that's why wappalyzer was unable to detect it.

Hello green stockers, i was wondering that what are those epic websites made of ? I am using gsap for a year now but haven't found any clue that how to create website like this: https://estudionk.com/ using gsap. The wappalyzer shows GSAP in the JS frameworks section and I am losing my mind that it should show any webgl library as well for threedy rotation of background, but as it shows GSAP only so I am curious how you do these kinda animations using GSAP ?

Nice. How did you gave this front light effect that's coming out of the ball ?

@GreenSock so is morph svg plug in paid ? do we have to buy it ?