TeamHype

Hi everyone! I am working on a project at the moment, and I am using this code snippet: TweenMax.set(convertForm, { y: -30, autoAlpha: 0, force3D: true }); *Note I have tried without the force3D too. And it is generating the following CSS: visibility: hidden; opacity: 0; transform: translate3d(0px, -30px, 0px); However the problem I am having is that the transform doesn't have any vendor prefixes, how can I change this, as I need the animation to work across multiple browsers. Many thanks in advance!

Just want to thank you all for your assistance, I went through and amended my code to reflect your recommendations, and I found the source of the problem to be the width transition for the line underneath the logo, I have now amended this. Thanks again!

Hello, I am having a couple of issues, the first being a slight flicker on load of the homepage, before the animation kicks in, it flickers a preview of the page: http://2017.hypemarketing.uk. My second issue is more serious, on my mobile, Android - Chrome V. 56.0.2924.87 the animation seems to lag incredibly, and almost stops my mobile browser working, could someone help me figure out how to make this smooth. Any and all assistance would be greatly appreciated, my code is below. jQuery(document).ready(function($) { // Scroll Magic Controller var frontPageAnim_Controller = new ScrollMagic.Controller(); //Scroll Magic Controller // Animation vars var htmlContainer = $('html'), body = $('body'), viewPort = $(window).height(), // Height of viewport heroSection = $('.hero-section'), panelClickthroughs = $('.panel-clickthroughs'), portfolioPanels = $('.portfolio-panel'), portfolioSection = $('.portfolio-section'), socialSection = $('.social-section'), scrollDown = $('.scroll-down'), scrollDownArrow = $('.scroll-down i') header = $('header'), heroContent = $('.hero-content'), logoContainer = $('.logo-container'), logo = $('#hype-logo'), letter = $('.letter'), letterFill = $('.letter_fill'), logoBorderBottom = CSSRulePlugin.getRule(".logo-container:after"), overlayMenu = $("#overlay-menu"), listItemsOverlay = $("#overlay-menu #primaryMenu ul li"), heroBackground = CSSRulePlugin.getRule(".hero-panel:before"); var fadeSlogan = function () { TweenMax.to(header, 1, { y: 0, autoAlpha: 1 }); TweenMax.to(heroContent, 1, { y: 0, autoAlpha: 1 }); TweenMax.to(scrollDown, 1, { y: 0, autoAlpha: 1 }); }; function urlChecker() { if( window.location.href =="http://2017.hypemarketing.uk/" ) { var otherAnimations = new TimelineMax({ immediateRender: true }); // Start New timeline for all other animations otherAnimations .set(heroBackground, { opacity: 1 }) //has been set in css to remove skip .set(logo, {visibility:"visible"}) .set(letterFill, {visibility:"hidden"}) .set(header, {y: -80, force3D:"auto", autoAlpha: 0, ease: Power2.easeIn }) .set(heroContent, {y: -15, force3D:"auto", autoAlpha: 0, ease: Power2.easeIn }) .set(scrollDown, {y: 30, force3D:"auto", autoAlpha: 0, ease: Power2.easeIn }); } else { //Do nothing } } urlChecker(); // TweenMax Timelines var timelineHero = new TimelineMax({ immediateRender: true }); // Start New timeline for Hero Section & Portfolio var entranceAnim = new TimelineMax({ immediateRender: true }); // Start New timeline for Entrance Anim timelineHero .set(heroSection, { top: 0, position: 'absolute', force3D:"auto" }) .to(heroSection, 0.4, { top: -viewPort, opacity: 0, ease: Power2.easeInOut }); // Animation for timelineHero entranceAnim .set(logoBorderBottom, { ease: Power2.easeOut, force3D:"auto" }) .set(letter, {fill:"none", force3D:"auto", stroke: "00ffbc", strokeWidth: "4", strokeLinecap: "round", strokeLinejoin: "round"}) .fromTo(letter, 3, {drawSVG:0}, {drawSVG:"102%"}, 0) //now animate the logo strokes (note we use "102% as FireFox 34 miscalculates the length of a few strokes) .fromTo(logoBorderBottom, 3, { width: 0 }, { width: 100 + "%" }, 0) //draw out the load under hype .to(letterFill, 1, {autoAlpha:1, ease:Linear.easeNone}) //fade in the real logo and the rest of the text .to(letter, 1, { stroke: "ffffff;", ease:Linear.easeNone }) //fade the stroke to white .to(heroBackground, 3, { opacity: 0.9, ease: Power1.easeIn, onComplete: fadeSlogan }, 0.3); //fade the background // Scroll Magic Scenes var heroAnimation = new ScrollMagic.Scene({ triggerElement: heroSection, triggerHook: 0, duration: 1 }).setPin(heroSection).setTween(timelineHero).addTo(frontPageAnim_Controller); // ScrollMagic Scene for Hero Section var portfolioSectionAnimation = new ScrollMagic.Scene({ duration: viewPort/2 }).setPin('.portfolio-section', { pushFollowers: true }).addTo(frontPageAnim_Controller); // ScrollMagic Scene for Portfolio Section // Scroll Down Button Begin TweenMax.set(scrollDownArrow, { transform: 'translateY(0)' }); TweenMax.to(scrollDownArrow, 1, { autoAlpha: 0, repeat: -1, transform: 'translateY(10px)' }); scrollDown.click(function(){ TweenLite.to(window, 0, {scrollTo:1}); // Scrolls 1px on scroll to initiate the Hero Section sliding out }); // Scroll Down Button End });