TaiwoJazz
Content Type
Profiles
Forums
Store
Blog
Product
Showcase
FAQ
Downloads
Everything posted by TaiwoJazz
-
Your point is quite valid... Thanks for the clarification...
-
Hi GSAP Team, though it's not long since I joined this amazing forum and I must really commend you all for the good job you all are doing... However, I would like to suggest to the team to look into the possibility of giving us a live chat section... The admins here are doing a great job no doubt but don't you guys think gsap forum will be more active and helpful if we have a live chat section... Especially for those who want to use gsap with other frameworks like React, Vue, and the rest... I think it will help developers of the same framework to help each other... This is just a suggestion and I want to assume that someone else might have already raised this... If there is an official answer to this request, maybe it will be better to pin it... Thank you all...
-
Hi guys, I'm trying to animate my navbar in and out but I'm getting an error on animation.play() The component I'm trying to animate is in the Menu component while the buttons that will control the animations are in the Navbar component which happens to be the parent component to the Menu component.. Here is a minimal demo on codesandbox.. Thanks.. @Rodrigo
-
Thanks... I guess i just need to grab the CDN link to those plugin as well...
-
My code works fine in codepen but not in Html and Js... I think i'm not registering the plugin well properly.. My Code gsap.registerPlugin(MotionPathPlugin, TextPlugin); let select = e => document.querySelector(e); let selectAll = e => document.querySelectorAll(e); let pause = select('#pause'); let animation = gsap.to("#herman", { duration:6, ease:"none", motionPath:{ path:"#motionpath", align:"#herman" }, }); gsap.from("#pause", {x:300, duration:2}) My Error app.js:1 Uncaught ReferenceError: MotionPathPlugin is not defined at app.js:1:21 I don't need to register plugin in code pen and my code works fine... Also, is this the right place to place the CDN link in my HTML? <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js"></script> <title>Document</title> <link href="/src/tailwind.css" rel="stylesheet"> </head> <body class="text-white w-full h-screen overflow-hidden text-center bg-[#C1D1EA] flex flex-col items-center justify-center"> <h1>Text Now</h1> <script src="app.js"></script> </body> </html>
-
@Rodrigo Thanks a lot.. I appreciate your time... Everything now works find in this minimal demo... GSAP has the best forum...
-
@Rodrigo I just created a minimal demo on codesandbox... As i said, both the about and contact pages' gsap codes are almost the same thing but somehow, the about section works fine while the contact section doesn't work... I tried to stimulate the exact code i have... Thanks...
-
@Rodrigo Sorry, Please i'm back again... I want to understand why the first code works just fine and the second code still shows target not found.. Based on the example you gave me above.. This code works just fine with no issues.. import React, {useRef, useLayoutEffect} from 'react'; import gsap from 'gsap'; import useLoader from '../../hooks/use-loader'; import useAnimatedLetters from '../../hooks/use-animatedletters'; import Bio from './Bio'; const About = () => { const aboutMe = useRef(); const {loading, loader} = useLoader(); useLayoutEffect(() => { let ctx; if (!loading) { ctx = gsap.context(() => { gsap .timeline({ defaults: {opacity: 0, ease: 'back', duration: 1}, }) .from('#about', {ease: 'linear', autoAlpha: 0}) .from('.content > p', {x: -100, stagger: 0.3}); }, aboutMe); } return () => ctx && ctx.revert(); }, [loading]); let string = 'About Me'; const {letters: Heading} = useAnimatedLetters({ strArray: string.split(''), index: 1, }); return loading ? ( loader ) : ( <section ref={aboutMe}> <div id="about" className="invisible px-6 lg:ml-16 flex flex-col lg:flex-row items-center justify-center gap-28 lg:40 xl:gap-72 h-full lg:h-screen mb-24 lg:mb-0"> <div> <h2 className="text-lightMode-100 text-3xl font-bold w-fit mb-6 mt-32 lg:mt-0"> {Heading} </h2> <Bio className="content" /> </div> </div> </section> ); }; export default About; But this code doesn't work.. Only the first element (#contact) in the timeline work.. The rest element in the timeline kept showing target not found... What may be the issue here... I think i'm doing everything right here and everything should work as expected... import {useRef, useLayoutEffect} from 'react'; import gsap from 'gsap'; import useLoader from '../../hooks/use-loader'; import Heading from './Heading'; import Form from './Form/Form'; const Contact = () => { const contactMe = useRef(); const {loading, loader} = useLoader(); useLayoutEffect(() => { let ctx; if (!loading) { ctx = gsap.context(() => { gsap .timeline({ defaults: {opacity: 0, ease: 'back', duration: 1}, }) .from('#contact', {ease: 'linear', autoAlpha: 0}) .from('#content > p', {x: -100, stagger: 0.3}) .from('.form div', {x: 100}, '<') .from('.form > input', {x: 100, stagger: 0.2}, '-=0.8') .from('.form textarea', {x: 100}, '-=0.8') .from('.form span', {x: 100}, '-=0.8'); }, contactMe); } return () => ctx && ctx.revert(); }, [loading]); return loading ? ( loader ) : ( <section ref={contactMe}> <div id="contact" className="invisible"> <div className=" flex flex-col lg:flex-row items-center justify-center h-fit lg:h-screen lg:pl-16 px-8 w-screen gap-20 lg:pb-24 overflow-x-hidden"> <Heading id="content" /> <Form className="form" /> </div> </div> </section> ); }; export default Contact;
-
@Rodrigo Thanks a lot for that input... I've been using react for 6 months... Still a not a pro but I'm getting there and i took a very good course and always try to make my code base readable... I really appreciate your input, you are a mentor to recon with.. I will work on it now... Thanks a lot guys... Hopefully i should be in Green Club Sock soon ??
-
Thanks for the reply... As i said, i really took time to read the React article and followed the step by step guide... For example, targeting classes and id with gsap.context() works in some places and through"Invalid Scope, Target error is some places in my code" These errors are not covered and I'm sure I'm following everything properly... Sorry I can't convert this code to codepen... But I'm not sure why I'm getting target error here.. import React, {useRef, useLayoutEffect} from 'react'; import gsap from 'gsap'; import useLoader from '../../hooks/use-loader'; import useAnimatedLetters from '../../hooks/use-animatedletters'; import Bio from './Bio'; const About = () => { const aboutme = useRef(); const {loading, loader} = useLoader(); useLayoutEffect(() => { let ctx = gsap.context(() => { gsap .timeline({ defaults: {opacity: 0, ease: 'back', duration: 6}, }) .from('#about', {ease: 'linear', autoAlpha: 0}); }, aboutme); return () => ctx.revert(); }, []); let string = 'About Me'; const {letters: Heading} = useAnimatedLetters({ strArray: string.split(''), index: 1, }); return loading ? ( loader ) : ( <section ref={aboutme} > <div className="invisible px-6 lg:ml-16 flex flex-col lg:flex-row items-center justify-center gap-28 lg:40 xl:gap-72 h-full lg:h-screen mb-24 lg:mb-0"> <div id="about"> <h2 className="text-lightMode-100 text-3xl font-bold w-fit mb-6 mt-32 lg:mt-0"> {Heading} </h2> <Bio /> </div> </div> </section> ); }; export default About;
-
Hi everyone, I feel like I'm just turning in a circle here for almost a week even after enrolling for Carl's Creative Coding Club course.. He's definitely doing a great job but since all gsap codes are written in vanilla js... Also, i have gone through the GSAP + React article of gsap learns section but it's not just coming in handy... I really want to master gsap using react... So i just wanna ask if anyone knows or has any gsap course that specifically focuses on React... Either on Udemy or anywhere.. A link will be appreciated... Thanks in advance...
-
Thanks a lot man... I will be on this article now... Appreciate the timely response...
-
Guys can anyone help with how to write GSAP code in React.. I was able to figure out most of it but I'm still finding it difficult to iterate over a list of items and apply certain tween to them one after the other... Only codepen link is allowed so i can't like my code but i will paste it here and then link what i'm trying to achieve with codepen link. Thanks in advance.. import gsap from 'gsap'; import React, { useRef, useLayoutEffect, useState } from 'react'; const Hover = () => { const [animation, setAnimation] = useState(); const hover = useRef(); useLayoutEffect(() => { let ctx = gsap.context(() => { gsap.defaults({ duration: 0.3 }); setAnimation( gsap .timeline({ paused: true }) .to('.text', { color: 'white', x: 10, scale: 1.3, transformOrigin: 'left center' }) .to('.dot', { backgroundColor: '#F93', scale: 1.5 }, 0) ); }, hover); return () => ctx.revert(); }, []); return ( <div className='width'> {[['Home'], ['About'], ['Portfolio'], ['Contact Us']].map(([title], index) => ( <div key={title} id={index} className='item' ref={hover} onMouseEnter={() => animation.play()} onMouseLeave={() => animation.reverse()} > <div className='dot'></div> <div className='text'>{title}</div> </div> ))} </div> ); }; export default Hover;
