Jump to content


  • Posts

  • Joined

  • Last visited

About anteksiler

Recent Profile Visitors

2,439 profile views

anteksiler's Achievements


Newbie (1/14)




Community Answers

  1. Is there support for viewport units? I am trying z:"-15vw", but I am only getting "-15" on transforms.
  2. Yes, but my question is related to this code: mainTl .add(animation1.play(), "position") .add(animation2.play(), "position"); They start together when using (mainTl.play()), but when reversed (mainTl.reverse()), they don't start together.
  3. You can see the issue here: http://revolution.fuelthemes.net/ When you click on the mobile toggle icon, the animation of the mobile icon and the menu start together. However, when clicked again (reversed), the mobile icon waits for the menu animation to finish.
  4. The hashtag has nothing to do with it, the javascript code has "return false;". I removed the hashtag, you can still see the issue on Firefox http://goodlife.fuelthemes.net/ The issue is with the scroll-behavior: smooth; The issue goes away once its removed. Also, a simple jQuery function works fine such as: jQuery('body,html').scrollTop(0);
  5. Well, I am using a regular scrollto function: container.on('click', function(){ TweenMax.to(win, 1, {scrollTo: { y: 0 }, ease:Quart.easeOut}); return false; }); I don't think you understand me clearly, I am not using any other function on that button. How can "scroll-behavior: smooth;" stop the javascript?
  6. As you can see from the demo url, when you scroll down, and click on the "up arrow" on the bottom right corner, scroll to plugin fails to scroll on Firefox. However if you disable the "scroll-behavior: smooth;" css on body element, the scroll works perfectly. http://goodlife.fuelthemes.net/
  7. Thanks, I have moved my timelines into a master timeline, and it's easier to control. However, I have an issue with position parameter of nester timelines. mainTl .add(animation1.play(), "position") .add(animation2.play(), "position"); Now, when playing mainTL, both animations start together, however, when using mainTl.reverse(), they are staggering. mainTL, animation1 and 2 are all paused.
  8. Is there anyway we can omit some tweens when doing reverse() ? I have this code menuTl .set($('.header_overlay_padding', header), {marginTop: $('.logolink', header).outerHeight()}) .to(header_overlay_menu, 0.3, { y: 0 }, "start") .set(header, {className: '+=light-header'}) .staggerFromTo($('.thb-header-menu>li>a', header), 0.5, { autoAlpha: 0 }, { autoAlpha: 1 }, 0.1, 'color') .staggerFrom($('.thb-header-menu>li>a', header), 0.3, { color:'#fff', clearProps: 'color' }, 0.1, 'color+=0.5') *** .to(bar, 0.5, { cssRule: { scaleX: 1, opacity: '0.1' } }, '-=0.5' ) .staggerFromTo($('.thb-secondary-menu-container a', header), 0.5, { autoAlpha: 0 }, { autoAlpha: 1 }, 0.1, 'subcolor') .staggerFrom($('.thb-secondary-menu-container a', header), 0.3, { color:'#fff', clearProps: 'color' }, 0.1, 'subcolor+=0.5'); *** I would rather not animate the lines marked with *** when doing reverse.
  9. Hmm, not quite, my issue can be visible on werkstatt.fuelthemes.net on a mobile screen. When you open the mobile menu and then do an orientation change, it does not refresh the values. I am animating percent x and y values.
  10. Hi @greensock, I suppose "strictUnits" also fixes the % based issues on device orientation change?
  11. Yes, that would be ideal, and would like to only scramble random number of letters, not all of them.
  12. I am actually using the ScrambleText, but it does not give me the option to randomize the order, that's why I had to use SplitText to randomize the letters.
  13. I am trying to achieve a similar effect on the menu elements on this site: http://www.kikk.be/2016/ As you can see, the text scrambles, and goes back, This is my code here: $('h1').each(function() { var _this = $(this), mySplitText = new SplitText(_this, { type: "chars" }), newchars = '*?�><[]&@#)(.%$-_:/\\;?!azertyuopqsdghjklmwxcvbn'.split(''), randomchars = shuffleArray(newchars), letters = shuffleArray(mySplitText.chars), tl = new TimelineMax({ paused: true }); $(letters).each(function(index, element){ tl .to(letters[index], 0.02, {scrambleText: randomchars[Math.floor(Math.random() * newchars.length)]}, index*0.02); }); _this.hover(function() { tl.play(); },function() { tl.reverse(); }); }); function shuffleArray(array) { for (var i = array.length - 1; i > 0; i--) { var j = Math.floor(Math.random() * (i + 1)); var temp = array[i]; array[i] = array[j]; array[j] = temp; } return array; } I am getting close, but it's taking some time Any help is appreciated.
  14. Hi guys, I recently noticed an error with CSSRule that only happens when the css styles are served from CDN assets. So if the stylesheet is inside a local path, the plugin works, but when the same stylesheet is loaded from CDN, CSSRule plugin says "cannot tween a null target", and I can verify the css rule is available on DOM. In this particular case, it was a pseudo element, ":after".
  15. Since Typekit asynchronously loads the fonts, the fonts change midway during the Splittext animation, causing unexpected line-breaks. How can we wait for the typekit font loading and then run the animation? https://werkstatt.fuelthemes.net/werkstatt-text-style/portfolio/the-deer-hunter/