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 ?