Search the Community
Showing results for tags 'syntax'.
Found 8 results
-
Hello everyone, My GSAP timeline loops 3 times. I use Splide.js to display my products. I can't make that when my timeline restarts, the product carousel also restarts from the beginning. That's why I come to ask for your help Adel Link to Splide JS : https://splidejs.com/ Link to banner : https://images-armis-staging.s3.eu-west-1.amazonaws.com/bricorama/newtemplates2023/appnexus/html/slideshowV2_300x600.html -
Hi, I'm a member of the GreenSock club and successfully downloaded and installed GSAP 3.0 and bonus plugins using the gsap-bonus.tgz method with YARN. I'm now trying to import the DrawSVGPLugin but it's throwing errors in my Terminal and then also in my browser. This is the setup in my main app index.js: import 'dom4' import 'svgxuse' import domready from 'domready' import { gsap } from 'gsap' import { DrawSVGPlugin } from 'gsap/DrawSVGPlugin.js' import Swup from 'swup' import SwupBodyClassPlugin from '@swup/body-class-plugin' import SwupJsPlugin from '@swup/js-plugin' import GlobalHeader from '../global-header' import ProjectGallery from '../our-work/project-gallery' import Contact from '../contact' import GlobalFooter from '../global-footer' import ScrollBtn from '../scroll-btn' import InView from '../in-view' gsap.registerPlugin(DrawSVGPlugin) This is the error that is showing in my Terminal: ERROR in bundle.js from UglifyJs SyntaxError: Unexpected token: keyword (var) [./~/gsap/DrawSVGPlugin.js:208,0] And this is the console error in my browser (Chrome): Uncaught SyntaxError: Unexpected token 'export' I can see the plugin inside the node_modules/gsap folder. I'm also running webpack@1.15.0 Any help would be greatly appreciated. Thanks, Dayne
-
Coming from CSS, I am used to being able to control what happens at a specific point during an animation with keyframe percentages. This is particularly helpful when the change I want to animate doesn't follow a linear pattern from state A to state B, but rather has some variation in between. So, for example, I can do something like this: @keyframes irregular-animation { 0% { transform: scale(0); opacity: 0; } 75% { transform: scale(1.25); } 100% { transform: scale(1); opacity: 1; } } However, I haven't managed to figure out how to do the same with GSAP. In GSAP, it seems I only have control of the start and end states (like with toFrom), but nothing in between. I know I can use custom ease functions to achieve somewhat of a similar effect to the one in the snippet above (whereby I design the easing curve to overextend a little), but this is far from ideal since I often only want to change a single property in this irregular way, not the entire tween. Notice how, in the snippet above, the opacity follows a linear transformation, and it would not make sense to overextend it (even though, for this example, an opacity of, let's say, 1.5 at 75% wouldn't break the animation). Also, it's hard to manipulate a custom curve such that a property reaches a specific value exactly after 75% of an animation is done (or an even less intuitive percentage, like, say, 27%). Timelines are also not ideal for this (from what I've tried, at least), because I want the entire animation to follow along the same easing curve (which is not the same as reusing the same ease in each tween) and, again, it's tricky to calculate when exactly 75% or some other percentage of the overall animation will be done. But maybe I'm missing something... If you had to recreate the simple animation in the CodePen I linked using GSAP, how would you do it? Is it possible to control the values for properties at a specific point during an animation that resembles what we can accomplish with @keyframes in CSS? Thank you for reading. I appreciate any help. -
Hi, Does anyone know why I get an unrecoverable syntax error in JSHint? Below is a script that I have tweaked. The original version was animated. $(document).ready(function(){ $.ajax({ url: "http://s1.adform.net/Banners/Elements/Templates/14036/8970.xml", type: "GET", dataType: "xml", success: function (xml) { $(xml).find("Group[name=9]").each(function () { var belopp = $(this).find("TextVar[name=summa]").attr("value"); belopp = belopp.substring(0, belopp.length-3); $(".jackpot").html('<h3>Just nu '+belopp+'</h3>'); }); } }); }); _________________________________________ The original version $(document).ready(function(){ $.ajax({ url: "http://s1.adform.net/Banners/Elements/Templates/14036/8970.xml", type: "GET", dataType: "xml", success: function (xml) { $(xml).find("Group[name=9]").each(function () { var belopp = $(this).find("TextVar[name=summa]").attr("value"); belopp = belopp.substring(0, belopp.length-3); $(".jackpot").html('<h3>Drömvinsten är just nu <br /> '+belopp+'</h3>'); var txt = $(".txt"); var txtIndex = -1; var playAnimation = 0; function playAgain() { if (playAnimation <= 4) { showNextTxt(); } else { ++txtIndex; $(".endframe").show(); $(".jackpot").hide(); } } function showNextTxt() { ++txtIndex; ++playAnimation; txt.eq(txtIndex % txt.length).fadeIn(200).delay(3000).fadeOut(300, playAgain); } showNextTxt(); }); } }); }); Best, A
-
Hi guys, As you can see in my codepen, I have a couple of svgs that have a filter applied. I would like to be able to apply the tweens I stored in the "addClass" and "removeClass" variable to specific id elements. How would I be able to achieve this? So that I can toggle the saturation. Any ideas? Thanks!
-
Hi guys, I am trying to use the Attribute Plugin to ensure that my SVG also animates in Firefox, but can't figure out the correct syntax for this: .fromTo("#star",1, {attr:{transform:"scale(0.2)"}},{attr:{transform:"scale(1)",transform:"rotate(360)"}}) The issue: This above code ignores the fromTo scale tween completely and just rotates the SVG and this gives me a syntax error: .fromTo("#star",1, {attr:{transform:"scale(0.2)"}},{attr:{transform:"scale(1)","rotate(360)"}}) All I want to do is scale up and rotate the star at the same time from transformOrigin:"50% 50%". I tried that as well as transform-origin:"center center" inside the Attr plugin with no luck. Thanks!
-
No problem or anything, just advices & experience feedback I've ben using coffeescript for like 2/3 years, and right now getting into those greensock' super-tools Problem is, greensock ends up being quite unreadable with coffeescript Simple example (those examples aren't here to show anything work) : Javascript : http://codepen.io/bbnnt/pen/RNBjpR?editors=001 Coffeescript (quick and dirty translation via js2coffee of the previous one) : http://codepen.io/bbnnt/pen/MYBOpq?editors=001 Coffeescript (another snipper a bit more worked out) : http://codepen.io/bbnnt/pen/jEpamz?editors=001 Oh wait… There are no onComplete or whatever options yet Complex greensock+coffee animations -> skyscrapers ! Acknowledging a lack of experience on my side, but I hope this "problem" is relevant enough I'd look for advices to use greensock with coffeescript, in a more readable and efficient way; if anyone has tips on this
-
Here is my full script: <script> $(document).ready(function() { var controller = $.superscrollorama(); //This code snippet is built on the parallax example: controller.addTween( '#gun', (new TimelineLite()) .append([ TweenMax.fromTo($('#hammer'), 1, {css:{rotation: 0}, immediateRender:true}, {css:{rotation: -25}, ease:Quad.easeInOut}), TweenMax.fromTo($('#trigger'), 1, {css:{rotation: 0}, immediateRender:true}, {css:{rotation: 40}, ease:Quad.easeInOut}) ]), 500, // scroll duration of tween 200); // offset? }); </script> What I need to know is... how can I add a tween to this timeline? I just need to know how to add tweens after the one I already have. Everything I have tried does not work.
