Jump to content

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

jesper.landberg last won the day on January 6 2019

jesper.landberg had the most liked content!


  • Posts

  • Joined

  • Last visited

  • Days Won


Everything posted by jesper.landberg

  1. Thanks for the great examples both of you, my problem is solved=)
  2. Hi, I'm trying to do a hover animation using GSAP. I could do this example using CSS but I'm going to add more to it later thus wanting to use JS/GSAP. What I want to do: If you just hover the btn quickly and leave immediately I want the enter animation to finish rather then being interupted and then I want the leave animation to fire when the enter animation is done. This works fine if I'm still hovering the btn after the enter animation is complete, but not if i leave the button before. You understand?=)
  3. Hi, is it possible to add a timeline into another timelines staggerFrom? Example: SomeTimelineLite OtherTImelineLite.staggerFrom(SomeTimelineLite) In other words, I want to do a stagger animation that is quite complex and doesnt fit inside staggerFrom(el, duration, {}, staggerDelay })
  4. I'm trying to use the scrollTo plugin but i'm having a weird issue. Using the latest gsap release. TweenMax is clearly there so i don't know why it is throwing this error? Does scollTo require TweenLite? "Browserify Error { [Error: Cannot find module '../TweenLite.js' from '/app/assets/js']" import TweenMax from 'gsap' import scrollTo from './ScrollToPlugin.min' class Arrow { constructor(){ this.arrow = document.querySelector('.js-arrow') this.init() } scrollDown(){ this.arrow.addEventListener('click', () => { TweenMax.to(window, 1.5, { scrollTo: "#story", ease: Expo.easeOut }) }) } init(){ this.scrollDown() } } const arrow = new Arrow()
  5. Hi, How do I in the easiest way repeat/loop part of a timeline? Making two timelines and attaching one to another or? How could this look?
  6. Hi, I am trying to use scrollToPlugin for the first time but I have a strange(?) issue. It works fine IF the element anchor I'm scrolling to has position: fixed. If else it doesn't work it just jumps there like a normal anchor. Can anyone see what is wrong? (also I'm parting ways with jQuery if you think my JS looks ugly or something:P) Code (part of a Class): import TweenMax from 'gsap' import utils from './config' import domselect from 'dom-select' import scrollTo from './ScrollToPlugin.min' this.topLink.forEach((el) => { const href = el.getAttribute('href') const url = href.replace(/\/+$/, "") const submenu = el.nextElementSibling const links = utils.js.arrayFrom(submenu.querySelectorAll('a')) links.forEach((el) => { if(utils.$url.indexOf(url) > -1){ el.addEventListener('click', (ev) => { const el = ev.target const anchor = el.getAttribute('href') const scrollTo = domselect(`${anchor}`).offsetTop TweenMax.to(window, 1, { scrollTo: { y: scrollTo }, ease: Expo.easeInOut }) }) } else { const anchor = el.getAttribute('href') el.setAttribute('href', `${url}${anchor}`) } }) })
  7. Is it possibly to remove the divs create by splittext after the animation has finished?
  8. EDIT: nevermind, had TweenMax loaded via CDN also, which was the reason for the error.
  9. Thanks for the reply, seems like autoAlpha sovled the problem:)
  10. Hi, I have a problem I have encountered a couple of times. If I have a timeline and some code.. something like this for example: var tl = new TimelineLite({paused:true}}; tl .set(element, { display: "block" }) .from(element, 1, { alpha: 0, ease: Power2.easeInOut }); $('a').click(function(e){ e.preventDefault(); var self = $(this); if(self.hasClass('active')){ self.removeClass('active'); tl.reverse(); } else { self.addClass('active'); tl.play(); } }); Sometimes, randomly, the tl.reverse(); won't reverse display: "block" to it's initial state, why is this and is there any solution?
  11. Hi and thanks for the reply. I am animating a regular html element, so no SVG involved. I know the support isn't the best but it works if I animate it with CSS by toggling a "is-active" class so I thought I would be able to do the same with Tweenmax. I will see if I can fix a simpel codepen=)
  12. Hi, How do I animate clip-path using TweenMax? My code below does not work. var clipFrom = "polygon(52% 0, 77% 0, 39% 100%, 16% 100%)"; var clipTo = "polygon(0 0, 100% 0, 100% 100%, 0 100%)"; TweenMax.fromTo('.some-element', 0.75, { clip: clipFrom }, { clip: clipTo, ease: Power4.easeOut }),
  13. Hi, I just upgraded to club greensock (99$), and just wondering what is included in the usual free TweenMax cdn that I used before? so I know what to include from this "huge" folder=)
  14. var tl = new TimelineLite(), feed = $('.feed'); tl.to(feed, 0.35, { alpha: 0, ease: Power3.easeInOut, onComplete: function(){ feed.empty().html(response); }}); Can anyone tell me why this would fire immediately?
  15. Yeah animating Y instead of height is for sure more smooth. Maby I have to try something else for my transition than height, want to be smooth in all modern browsers. I'l PM the link.
  16. Well, the image i am actually using in development is "only" 300kb 1920x1080px, so I don't know if that is the problem, might be the height. Your solution is nice, but I can't use a white overlay, since I am animating it over another page. I am uploading my stuff to a password protected dev server atm, I can PM u the password and you can see the real stuff. BTW, didn't know u could transform procentual values now (yPercent), is that a new feature? Cleaner than saving the width of an element as a variable when I need to transform full width or height.
  17. Hi again, here comes a somewhat simplified demo, but I still get pretty much the same issue, the animation is very jumpy in Safari, it kind of jumps to the middle and goes from there. See for yourself. http://codepen.io/ReGGae/full/zrNvoN/ (best to watch in full page mode)
  18. Thanks for the answer. Going to try to create a demo recreating the issue.
  19. Hi, I have some questions regarding force3D. I have a pretty animation-heavy site, which runs super smooth in Chrome and Firefox, but very poorly in Safari, and I am looking into all possibilities why this might be. One thing I am thinking about is the way I use force3D. 1. Should I use true or auto? 2. Should i use force3D on ALL alements that have alpha or transforms animated? I currently set force3D: "auto" on all of them. 3. Any good resources on how to use force3D correctly?
  20. Hi, I'm trying to create enter and leave animations with TweenMax and angular 1.4+. I have this code: .animation('.page', [function(){ return { enter: function(element, doneFn){ TweenMax.from(element, 1, { css: { transform: "scale(0.8)", opacity: 0 }, force3D: "auto" }); }, leave: function(element, doneFn){ TweenMax.to(element, 1, { css: { transform: "scale(1.1)", opacity: 0 }, force3D: "auto" }); } }; }]) The animations are working but the thing is the pages get stacked, since I don't tell angular when the animation is done. You are supposed to use "doneFn" for this but I don't know how to implement that in the code. https://docs.angularjs.org/api/ngAnimate
  21. lets say I have this: div{ transition: translate .25s; } div:hover{ transform: translateY(100px); } How would I replicate a simple hover effect with GSAP? Start animation on hover, and reverse it on mouseout, and enable them to be interruptible?. Well yeah exactly how hovers work with CSS.
  22. Hi, I just want to know if there is any difference in using say { x: "50px" } VS { css: { transform: "translateX(50px" }}, performance wise etc? Is x/y/z always better when it comes to positioning? thanks
  23. Hi, So I have this code: var toggleInfo = function(){ var info = new TimelineLite(); $('.info-open').click(function(e){ e.preventDefault(); info.to('.info', 0, { css: { className: "-=display-none"}, immediateRender:false}); info.to('.info', 0, { css: { className: "+=flex"}, immediateRender:false}); info.from('.info', 0.4, { css: { transform: "scale(0.2) translateZ(0)", opacity: 0 }, ease: Power3.easeOut, force3D: "auto"}); info.staggerFrom('.about span', 0.4, { css: { transform: "translateY(60px) translateZ(0)", opacity: 0}, ease: Power3.easeOut, force3D: "auto"}, 0.1); info.staggerFrom('.contact li', 0.4, { css: { transform: "translateY(-30px) translateZ(0)", opacity: 0}, ease: Power3.easeOut, force3D: "auto"}, 0.1); info.from('.info-close', 0.2, { css: { transform: "translateY(-60px) translateZ(0)", opacity: 0}, ease: Power3.easeOut, force3d: "auto"}); }); $('.info-close').click(function(e){ e.preventDefault(); info.reverse().timeScale(2); }); } And it works fine the first time i click the triggers. However, when I click "info-open" again after I have clicked "info-close", it fires info.reverse(). This is an overlay im toggling and the first open and close works, but when i want to open it again it only fires the reverse animation thus closing the overlay.