Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Obaid Nadeem

Members
  • Posts

    19
  • Joined

  • Last visited

Contact Methods

Profile Information

  • Gender
    Male
  • Location
    Earth
  • Interests
    A creative guy having background in design doing web animations :D
    Interests:
    Designs,
    Web Animations,
    Avatar- The Last Airbender

Recent Profile Visitors

473 profile views

Obaid Nadeem's Achievements

  1. Hey @Smithfield I have shoot you an email. Looking forward to your response. https://obaidnadeem.com
  2. Looks really amazing John. Thanks for sharing.
  3. Hey @Nerd Your job post seems interesting, would love to know more details about this. https://obaidnadeem.surge.sh
  4. Hey @prjbios , Can you please provide a minimal codepen demo ?
  5. 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
  6. 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.
  7. 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 ?
  8. 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.
  9. Nope, It's pure css. Can be done with GSAP also.
  10. yeah I think I shouldn't put that much trust on Wappalyzer
  11. 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.
  12. Very much experienced with scroll trigger after solving uncountable errors while using it. Portfolio: obaidnadeem.surge.sh Email: obaidnadeem4@gmail.com
  13. 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 ?
  14. Amzaing! Watched the stream and learned a lot. Thanks.
×