m4rsibar

you really must be a superhero

Is there anyway you could help me figure out what I'm doing wrong @Rodrigo? Here i'm trying to separate out the Scroll component into it's own file and have a reference of it in the app component so the tweening can take place... i've been stuck on this concept for a while now ? import React, { Component } from "react"; import "./App.scss"; import styled, { keyframes } from "styled-components"; import { TweenMax, TweenLite, Power2, TimelineLite } from "gsap"; import Scroll from "./ScrollSpy"; class App extends Component { scroll = React.createRef(); componentDidMount() { this.tl .staggerTo(this.welcomeTxt, 0.9, { opacity: 1, y: 70 }, 0.1) .staggerTo( this.welcomeTxt, 0.9, { visibility: "visible", opacity: 0, delay: 0.5 }, "prev" ) .to(this.name, 0.9, { y: 350, x: -400 }, "prev+=.5") .to(this.nav, 0.9, { opacity: 1 }, "prev+=.5") .to(this.hero, 0.9, { opacity: 1 }, "p rev+=.9") .staggerTo(this.lis, 0.9, { opacity: 1, x: 20 }, "prev+=.9") .to(this.music, 0.9, { opacity: 1 }, "prev+=2") .to(this.scroll, 0.9, { visibility: "visible" }, "prev+=2"); this.tl.play(); } render() { return ( <Scroll ref={this.scroll} /> ); } } export default App; I've removed a lot of code for ease of reading and the Scroll component is here: import React, { component } from "react"; import { BrowserRouter, Route } from "react-router-dom"; import styled from "styled-components"; const Scroll = React.forwardRef((scroll, ref) => ( <ScrollSpy ref={ref}> <div className="one" /> <div className="two" /> <div className="three" /> </ScrollSpy> )); const ScrollSpy = styled.div` visibility: hidden; grid-column: 11/13; grid-row: 6/9; display: flex; ${"" /* flex-direction: column; */} justify-content: center; & .one { height: 10px; width: 10px; background: black; border-radius: 50%; margin-right: 0.5em; } & .two, .three { height: 10px; width: 10px; background: transparent; border: 0.5px solid black; border-radius: 50%; margin-right: 0.5em; } `; export default Scroll;

i'm wondering how to use staggerTo when the mapping is happening in a separate component. not sure if i'm asking this in a way that makes sense, because im not entirely sure how staggerTo is working, but i've managed to get it to work... the problem is i've since separated the components in my app for readability and it's broken now. Before i moved the component it looked something like this(leaving out irrelevant code) class App extends Component{ lis= [ ] state={ liText: ["My Work", "About Me"] } this.tl .staggerTo(this.lis, 0.9, { opacity: 1, x: 20 }, "prev+=.9") this.tl.play(); } render() { return ( <Nav ref={div => (this.nav = div)}> Logo <ul> {// map through the elements this.state.liText.map((element, index) => ( <a href="#"> <li key={index} ref={li => (this.lis[index] = li)}> {element.li} </li> </a> ))} </ul> <Logo /> </Nav> ) } } the new separated nav component looks like this: const Navigation = React.forwardRef((props, ref) => { return ( <Nav ref={ref}> Logo <ul> {// map through the elements props.liText.map((element, index) => ( <a href="#"> <li key={index} ref={li => (props.lis[index] = li)}> {element.li} </li> </a> ))} </ul> </Nav> ); }); export default Navigation *styled-component stuff down here* and the App.js looks the same except for this <Navigation liText={this.state.liText} lis={this.lis} ref={div => (this.nav = div)} />

With a little more research I've found out why the Lite versions weren't working, i think i'd need the CSS plugin as well, the Max version includes it. (the post i read this on was a little dated) Initially making the wrapper hidden, then visible is working better than what I had, but I must ask, why would you consider this an "extreme" solution? What would a less extreme solution be? I also realized in my JS I was setting the wrapper to display: "initial", but in the CSS .wrapper's display:none was commented out.. oops.. ?

https://m4rsibar.github.io/Editorial/slider/java.html The body flashes before the splash page has a chance to load, i've tried displaying: none on the content(which is a wrapper around all of the content) and then changing to display: initial in the showComplete function (in bold...where it's called is in bold too) I'm using the gsap library to animate the splash page. Also, an aside: i tried changing the CDN link to the timeline lite version (i also tried the tweenlite version), and changed all instances in my code from "TimelineMax" to "TimelineLite" and it wouldnt work, how do I fix this? let tl = new TimelineMax(); tl.staggerTo( ".landPageLetters", 1.4, { opacity: 1, ease: Expo.easeInOut }, 0.3, "init" ); tl.to(".overlay", 0.8, { visibility: "visible", y: 0, ease: Bounce.easeOut },"init+=2.2"); tl.to("button", 0.8, { opacity: "1" }); let button = document.querySelector(".enterButton"); button.addEventListener("click", _ => { tl.to('.enterButton', 0.1, {scaleX:1.5, scaleY:1.5, ease: Power4.easeInOut} ) tl.to('.enterButton', 0.1, {scaleX:0.2, scaleY:0.2, opacity: 0, delay:0.3, ease: Power4.easeInOut}) tl.to("button", .7, { y:"-120%", opacity: "0" },"disappear") tl.to(".overlay", 1.2, { y: "-120%", ease:Power1.easeOut, **onComplete: showContent** },"disappear+.7") tl.to(".overlayContainer", 1, { y: "-120%", ease:Power1.easeOut, }) tl.staggerTo( ".landPageLetters", 2, { y: "-120%", opacity: 0.2, ease: Expo.easeInOut, }, 0.1, "disappear+=.8" ) tl.staggerFromTo(".navbar ul li", 1, { opacity:0, y:8 },{ ease:Expo.easeInOut, opacity: 1, y:0 },0.3, "disappear+=1.5") content=document.querySelector('.content'); **function showContent(){ // content.style.display="initial"; body.style.overflow="auto"; }** });

Playing around ive manage almost get the desired effect im going for. simply: when one menu is opened, the other closes, vice versa. i'm not sure this is the best way of doing things (if you'll be so kind to look at the code in the codepen ive tried to comment to make it easier) the problems: when clicking quickly back and forth between the two buttons everything gets glitchy/janky. i'm very new to this library any pointers in the right direction are appreciated.

But isn't the opacity of the element I'm trying to animate already 1? I don't understand why I cannot use only from, nor do I understand why what I'm trying to do works in this codepen example, but not my project.

I've made a simple pen in codepen with just a navbar, ul, and li and staggerfrom works as expected, but when i try to use it in my project i cannot get it to work at all? I am able to get the desired effect if i use stagger from, and directly after stagger to on the same element but i'm under the impression that you don't have to do that and stagger from is sufficient. i've connected a codepen with my project and a big comment section in the javascript of the lines of code that arent working for me, thank you for any help, p.s( ive just started using GSAP, very new.) (example of what i mean in above) TweenMax.staggerFrom(".navbar ul li", 1, { delay: 2, opacity:0, y:8, ease: Expo.easeInOut }, 0.2) TweenMax.staggerTo(".navbar ul li", 1, { delay: 2, opacity:1, y:0, ease: Expo.easeInOut }, 0.2)