Galanthus88

Hi guys, I am using GSAP for 3 months now. Most say it makes adding animations to the website is way more easier and cleaner. Compliments to you guys! My question is I am working on a WordPress website. I have implemented GSAP and using animations on the homepage. My problem is the site header and site search div on the homepage is set to opacity of 0 in SCSS. This works fine, however when i go to other pages I would like to totally disable all animations and opacity should be 1 by default. Can someone help me out? Thanks in advance! This is my JS file: (() => { const intro = document.querySelector('[data-intro-active="true"]'); if (!intro) { return; } const tl = gsap.timeline({ defaults: { ease: 'ease', duration: 0.5, delay: 0 } }); const animation = bodymovin.loadAnimation({ container: intro, path: lottiePath, renderer: 'svg', loop: false, autoplay: false }); const onAnimationLoad = () => { animation.play(); }; const runGSAP = () => { tl.to('.header', { y: -30 }, '+=2.4'); tl.to('.header', { opacity: 1, y: 0 }); tl.to('.search__image', { y: 60 }, '-=1.5'); tl.to('.search__image', { opacity: 1, y: 0 }); tl.to('.search__content', { scaleX: 0, transformOrigin: 'left' }); tl.to( '.search__content', { scaleX: 1, visibility: 'visible' }, '-=.5' ); tl.to('.search__inner', { opacity: 1 }); tl.to('.btn', { opacity: 1, stagger: 0.3, duration: 0.3 }); }; window.addEventListener('load', onAnimationLoad); window.addEventListener('load', runGSAP); })(); This is my code in SCSS: @mixin Search { .search { $this: &; position: relative; overflow: hidden; &__image { opacity: 0; } &__box { background-color: v(color-pearl-base); padding: 5rem 4rem; @include media-breakpoint-down(sm) { padding: 2.5rem 2rem; } } &__inner { opacity: 0; } &__form { width: 100%; display: grid; align-content: center; grid-template-columns: 1fr auto; border-bottom: 0.2rem solid currentColor; margin-bottom: 3rem; } &__content { position: absolute; top: 50%; left: 50%; width: 100%; visibility: hidden; max-width: 80%; margin: 0 auto; transform: translate(-50%, -50%) scaleX(0); } &__tags { display: grid; grid-template-columns: repeat(4, auto); grid-gap: 2rem; justify-content: flex-start; .btn { opacity: 0; } } &__input { background-color: transparent; caret-color: v(color-scarlet-base); line-height: 1.2; cursor: pointer; width: 100%; font-size: 4rem; font-family: 'resolve-sans-semibold'; color: v(color-wine-berry-base); @include input-placeholder { color: v(color-wine-berry-base); } @include media-breakpoint-down(sm) { line-height: 1.5; font-size: 2rem; } } &__submit { display: flex; align-items: center; cursor: pointer; font-size: 1.8rem; font-family: 'resolve-sans-medium'; text-transform: uppercase; color: v(color-scarlet-base); background-color: transparent; @include media-breakpoint-down(sm) { font-size: 1.6rem; } } &__arrow { width: 2rem; height: 1.3rem; background: { image: get-icon('arrow-submit', #ff1e00); repeat: no-repeat; size: contain; position: center center; } } } } @include Search;

Thank you so much!!!!! Yesss!!!!!!

Hi, I don't have a codepen URL because I am working in a WordPress environment with Webpack which compiles my code. I am trying to animate a complete div from the left side to the right side with "scaleX". I have applied this to the "search__content" div. But for some reason at 50% it disappears and is not showing anymore. Animate with scaleX from the left to the right - 0% to 100%. This is my SCSS: &__content { position: absolute; top: 50%; left: 50%; width: 100%; // visibility: hidden; // overflow: hidden; max-width: 80%; margin: 0 auto; transform: translate(-50%, -50%); transition: all 0.5s; transform-origin: left; } const tl = gsap.timeline({ defaults: { ease: 'ease', duration: 0.6, delay: 0 } }); tl.to('.header', { y: -30 }); tl.to('.header', { opacity: 1, y: 0 }, '-=.2'); tl.to('.search__image', { y: 60 }, '-=2'); tl.to('.search__image', { opacity: 1, y: 0 }); tl.to('.search__content', { scaleX: 1, transformOrigin: 'left' }); tl.to('.search__content', { scaleX: 0, transformOrigin: 'left' });

Thank you very much for the help and welcome. I am new to GSAP and really like it. This solved my issue!

Hi, I have issue on iOS and desktop where on first initial run my animation would not run as expected. Lagging and instantly skipping the animation. Can someone help? tl.from( '.hero__figure', { opacity: 0, y: 50, ease: 'Power2.easeInOut' }, '-=0.75' ).to('.hero__figure', { y: -60, rotate: '0' });