Jump to content
GreenSock

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

Fritz1602

Members
  • Posts

    4
  • Joined

  • Last visited

Profile Information

  • Gender
    Male
  • Location
    Hamburg / Germany

Fritz1602's Achievements

Newbie

Newbie (1/14)

1

Reputation

  1. Hm. Thanks a bunch. It's deep in the night here and I followed your advice and tried to isolate the problem in a smaller Webpack setup. Can't reproduce the error. In my reduced test-case everything runs as expected. GSAP is wonderful. I will dive in deeper in the next days and weeks. If I will find out the reasons, I will let you know. Once More. Thank you for wonderful GSAP and great support and your efforts.
  2. Thank you so much. I changed my Code to this. I hope I have followed your advice in this way. var controlit = document.querySelector("#hamburger-btn"); var menuToggle = new TimelineMax({ paused: true, reversed: true }); menuToggle .set(controlit, {className:"-=closemenu"}) .set(controlit, {className:"+=openmenu"}) .to(' .top', .2, {y:-9, transformOrigin: '50% 50%'}, 'burg') .to(' .bot', .2, {y:9, transformOrigin: '50% 50%'}, 'burg') .to(' .mid', .2, {scale:0.1, transformOrigin: '50% 50%'}, 'burg') .add('rotate') .to(' .top', .2, {y:5}, 'rotate') .to(' .bot', .2, {y:-5}, 'rotate') .to(' .top', .2, {rotation:45, transformOrigin: '50% 50%'}, 'rotate') .to(' .bot', .2, {rotation:-45, transformOrigin: '50% 50%'}, 'rotate'); controlit.addEventListener('click', (e) => { menuToggle.reversed() ? menuToggle.restart() : menuToggle.reverse(); }); Unfortunately, nothing has changed. Dev mode is great. Production mode remains strange. I don't know, if I got the question right. In dev Mode all my code is running fine just importing like this. import TweenMax from "gsap/TweenMax"; After your kind hint with tree shaking I tested the following without success for production mode. import {TweenMax, TimelineMax, CSSPlugin, AttrPlugin, BezierPlugin, TweenPlugin } from "gsap/all"; const plugins = [ CSSPlugin, AttrPlugin, BezierPlugin, TweenPlugin ]; Beside the tiny hamburger Animation above, I am doing some staggered Animations for menu items, which works perfectly fine in dev and production mode. TweenMax.staggerTo(primaryMenuLiItems, 1, { ease: Back.easeOut, autoAlpha: 0, x: 50 }, .1 ); It seems to be an issue with the transform-origin for "path.top" and "path.bot". In dev Mode the following element style results in a perfect "X" transform-origin: 0px 0px 0px; In production mode the following element causes the strange result transform-origin: 0px center; I am heartbroken to make so much effort and apologize again for my English. Thanks a million.
  3. Many thanks for the friendly welcome and the directional advice. Unfortunately, no improvement has yet occurred. If I understand correctly, I have to separately import and address all plugins that have led to successful animation in dev mode. Is there an easier way to find this out? So far I have - unfortunately without success - tried the following import {TweenMax, TimelineMax, CSSPlugin, AttrPlugin, BezierPlugin, TweenPlugin } from "gsap/all"; const plugins = [ CSSPlugin, AttrPlugin, BezierPlugin, TweenPlugin ];
  4. Hi there, this is my very first Question and I am a noob according GSAP, Webpack and this forum. I hope that this is the right way and place to ask a question and I provide all necessary information. What I am trying to achive is learning to work with wonderful GSAP (TweenMax and TimelineMax) and Webpack4. Everything is working fantastic with "-- mode development". I imported GSAP this way in my nav.js file. import TweenMax from "gsap/TweenMax"; When I switch to -- mode production in my build process, the animation runs, but instead of an "X" it ended like shown in the uploaded image. Any hint in which direction I could go further would be most welcome. Sorry for my English and many thanks in advance.
×