m4rsibar

Members
  • Content Count

    6
  • Joined

  • Last visited

Community Reputation

1 Newbie

About m4rsibar

  • Rank
    Newbie

Recent Profile Visitors

The recent visitors block is disabled and is not being shown to other users.

  1. 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.. 🙄
  2. 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"; }** });
  3. 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.
  4. m4rsibar

    Stagger from not working specifically in my project

    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.
  5. 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)