Jump to content

Search the Community

Showing results for tags 'click'.



More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • HTML5 / JS
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


AIM


MSN


Website URL


ICQ


Yahoo


Jabber


Skype


Location


Interests

Found 26 results

  1. Hello good people. I have a strange questions. I created animation play / reverse, but to start it I need to click twice and after that it works as it's should be... Any suggestion for this weird behaviour? Thanks! ❤️
  2. Hi guys, I've always found animating anchor links with CSS very laborious, however up until now it's been a bit too complex for me to do it with GSAP. I've decided to take a shot at it & have so far I've spliced together an example with fullpage.js & one of @OSUblake pens. At the moment the nav dots work on click, however I'm stuck updating them via scroll. My idea was to use the if statements but so far no cigar. Any ideas how this would be done in tandem? Cheers, Smallio
  3. Hi everyone, Please i need to know if Dynamic (feed driven) Google DoubleClick banners can be hand coded and not created using Google Web Designer. If so does anyone have any base templates to start from. I hand code everything using GSAP and i just want to inject the data using Javascript and not be tied down to Google Web Designer. I am willing to pay for Live Online training for someone who can help me with this or even doing builds in Google Web Designer and adding custom code. Any help would be much appreciated. Thanks Brad
  4. Hi everyone, I am trying to perform an animation with a delay on every subsequent SVG 'path'. In this Codepen link you can see that every letter of the SVG logo is separated by a 'path'. How do I perform a DrawSVG animation delay for each path, similar to how it looks like in here. This was animated using Anime.js, but sadly it couldn't control the animation using events as good as DrawSVG, but the delay of each letter was what I'm looking for. Is there a quick way to do this? Or would I have to manually delay every path by giving it IDs? Thanks
  5. Hello, First time posting here, but already learned a lot of great things on this forum. Thank you community! I am having a problem with playing timeline from a certain point (label). I have one master timeline, which is holding a lot of smaller timelines, functions etc. And I have main navigation (regular buttons), that should control navigating through the main (master) timeline. const master = new TimelineMax(); master.add( preload ) .add( audio_togle, '+=13' ) .add( particles ) .add( navigation_show ) .add( videoSize, 'particles+=2' ) .add(function () { videoPlay('intro') }) .add( parallax ) .add( scene_first_show, 'scene1show' ) .add( pause ) .add( scene_first_hide, 'scene1hide' ) .add( pause ) .add(function () { scene(text[0]) }, 'home' ) .add( pause ) .add(function () { scene(text[1]) }, 'about') .add(pause) .add(function () { scene(text[2]) }, 'contact') .add(pause) .add(function () { scene(text[3]) }, 'portfolio') .add(pause) .add(function () { videoPlay('outro')}) .add( scene_final, 'finalLogo') .add(pause) function pause() { master.pause(); masterIsPaused = master.paused(); console.log('Master is paused'); } And I have that main navigation button, where on click, I check it's `data-show` attribute, and use it as a label name. mainNavItem.on('click', function () { $self.addClass('is-active'); mainNav_hide(); var whatToShow = $self.data('show'); master.seek(whatToShow); }); But `master.seek(whatToShow);` doesn't work at all. How can I jump to certain label and play from there? Thank you, Mo
  6. Bernt

    MorphSVG on click

    Hi! New to this, well basically new to coding in general. Tried finding a similar project/post, but haven't found anything. Hopefully someone can point me in the right direction I have four SVG shapes that i want to morph step by step. So: shape 0 > shape 1 > shape 2 > shape 3 > shape 0 (and loop). I want the shapes to loop, but also want to force jump to next shape on click. If that makes sense.
  7. In my Codepen example, there is a gold circle. When you click the gold circle, it moves around the page using `x` and `y`. If you click the circle while it's moving around, another timeline animation for the circle gets queued and runs after the initial one has finished. I want to prevent this behaviour. My instinct tells me to use lodash `throttle`, but I feel there should be a better way to do this, especially as I would need the duration of the animation to use a throttle. I want any click to the circle to have no effect if the animation is in progress. Is there a `TimelineMax` method I can use to achieve this?
  8. I have a multi-stage menu animation that I've been tinkering on for a while now. I have finally got it to work, but it only works once all the way through and then it breaks when you try to revisit the menu a second time. For the first part, the chopsticks grab the fish on hover. If you leave the sushi menu without clicking, the animation reverses. The second part happens on click. The fish is consumed as the menu expands and the chopsticks cross to form the closing button. The third part is a second click that closes the menu and reverts the sushi menu to the initial position WITHOUT reversing the previous animation completely. Again, it works for the first go, but anytime after, it doesn't perform the second and third parts and the first part gets wonky. I created a Codepen, but it didn't seem to want to work there like it does live. You can see the entire site and my menu animation at http://sushi503.com. I have tried doing a single timeline, a master timeline with child timelines and finally separate timelines, which has been the most successful. Thanks in advance!!
  9. Good morning, or good afternoon, or good evening… Hello guys! I'm working on a cog rotation animation for the (under development) store of my website. You can see it on the top right corner of the attached image. If I was not so perfectionist, I would have been done with it since two days… Sadly (for me), I too often —love— to fine tune things… so I would like my rotation animation to be as precise as I expect. I've made a Codepen which so far (at about 90%) shows exactly the kind of animation I would like. However, I'm quite a newbie to GSAP and I've the feeling my actual code could be way overthought. I made a bulle list to try to explain you the animation process and would much appreciate if you could tell me is there is a way to simplify / rethink it. I also miss the TODO point. Thanks in advance for your time, Cheers, Édouard.
  10. I have a button that when clicked, triggers my timeline to play. There is no delay on start and on the first click it works fine. On subsequent clicks, it takes time for the animation to start. Any idea what I'm doing wrong? I've tried triggering the animation with just TL.restart() and also having an onComplete function that sets the timeline's progress to 0 and pauses it. Any idea how I remove that delay on subsequent clicks? Code here: var tl = new TimelineMax({paused: true, onComplete: resetTl}); TweenMax.set('.fab', {perspective: 200}) tl.to('#sendplane', 1, {rotation: -20, opacity: 0, x: '+=100', ease: Elastic.easeIn.config(1, .9), onComplete: resetPlane}) .to('.fab', .25, {scale: 1.2, boxShadow: '0px 7px 15px rgba(0,0,0,0.1)'}, '-=.8') .to('.fab', 2, {rotationY: -360, ease: Elastic.easeIn.config(1, .9)}, '-=1.8') .fromTo('.checkmark', .5, {drawSVG: '0%'}, {drawSVG: '100%'}) .to('.fab', 2, {rotationY: 360, ease: Elastic.easeIn.config(1, .9)}) .to('.checkmark', .2, {opacity: 0}, '-=1.1') .to('#sendplane', 1, {x: '+=100',opacity: 1}, '-=.4') .to('.fab', .25, {scale: 1,boxShadow: '0px 0px 5px rgba(0,0,0,0.3)'}) function resetPlane(){ TweenMax.set('#sendplane', {x:'-=200', rotation: 0, opacity: 1}) } function resetTl(){ tl.progress(0) tl.pause() } document.getElementById('fab').addEventListener('click', function(){ tl.play() //I've also tried tl.restart() and it still has a delay. })
  11. Hi, Newbee here, I'm looking for the simplest way to toggle back and forth [ morph ] between two svg icons. That's it... Thank you for your time!!!!!
  12. Hi, guys! I have a problem with minimumMovement parameter in Draggable. There is a site menu with several clickable links. I want to be able to drag the entire menu even if mouse cursor (or touch) is above the <a> element. But now I can drag it only if I press on empty area of the menu. You can check the actual version right here: http://nordskill.com/dock/argish/index-about-us.html But you have to squeeze the browser window to "mobile" width to see what I'm talking about. The DOM structure looks like this: <menu class="nav"> <ul> <li><a href="#">btn name</a></li> <li><a href="#">btn name</a></li> <li><a href="#">btn name</a></li> <li><a href="#">btn name</a></li> </ul> </menu> JS: Draggable.create(".nav", {type:"x", edgeResistance:0.75, throwProps:true, minimumMovement:2, bounds:window});
  13. I'm having an issue with the draggable plugin on our new website. It was working before and I can't seem to work out what has changed. I found a few topics but the resolutions didn't appear to be relevant to my situation. The website is https://www.britishwebsites.co.uk - A user can drag the map around and I'd like for the entire map to be draggable (including the landmarks/links). I've also got a click event on the links (added using jQuery) to override standard functionality using event.preventDefault(); On desktops and iOS devices the behaviour is as expected, however on Android you have to long tap or tap lots of times in quick succession to trigger the click event and show a category. I'd prefer not to rework the functions to work with the touchstart/mousedown and touchend/mouseup events while manually detecting the amount the map has moved, but wondered if this is the only solution? I cannot seem to isolate another issue and there are no touch events with preventDefault or stopPropagation applied. This is my config for initialising draggable: var draggableConfig = { type:"x,y", edgeResistance:0.75, bounds:map.elems.$mapBar[0], //trigger:map.elems.$mapCanvas[0], throwProps:true, zIndexBoost:false, dragClickables:true, onThrowUpdate:map.update, onDrag:map.update, onDragStart:function(){ map.updateMessageSequence(true); if(map.lastDragTime === false){ map.dragStartTime = new Date().getTime(); } }, cursor:map.customCursor ? "none" : "move", force3D:true, overshootTolerance:0.2 }; this.draggableInstance = Draggable.create(map.elems.$mapCanvas[0], draggableConfig); this.update.call(this.draggableInstance[0]); The click event for the links which I've tried applying both before and after initialising Draggable: map.elems.$clickable.on("click",function(e){ e.preventDefault(); var category = $(this).attr("href"); woopra.track("mapClick", {category:category}); ga('send', 'event', 'Map', 'Click', category); mapCats.changeCatState(category); }); The only other code I believe may be relevant is the touch events on the SVG shapes overlaying the map: svgMouseEvent:function(e){ e.preventDefault(); var $area = $(this); switch(e.type){ case "mouseover": case "touchstart": if(map.customCursor){ map.elems.$cursor.addClass("finger"); } $area.data("$matchingLandmark").data("mouseover",true); new TweenLite.to($area.data("$matchingLandmark")[0],0.5,{autoAlpha:1}); new TweenLite.to($area.data("$matchingLandmark").data("$labelEl")[0],0.5,{autoAlpha:1}); break; case "mouseout": case "touchend": if(map.customCursor){ map.elems.$cursor.removeClass("finger"); } $area.data("$matchingLandmark").data("mouseover","tween"); map.update.call(map.draggableInstance[0]); break; } } Thank you in advance if any help can be offered.
  14. http://allthetime.co.nf/GSAPslider/ I'm developing a GSAP slider and it works well now with keyboard and click control. I want to be able to animate between states upon receiving a click/key event. So, when it's on slide 1 and I click the button for slide 4 instead of going to slide 4 instantly, the animation scrolls quickly across slide 2 and 3 and then lands at 4. Any ideas?
  15. Hi All, I am new to GSAP and inexperienced with javascript so please bear with me. I am currently trying to make a Go To Top button that follows you down the page and when you click the button it brings you back to the top of the page and so far it has been working.... Unless you want to use it more than once. For some reason, I can't get it to play again after the first click. I have been using timeLineMax and scrollTo to achieve this so far. I have been trying something like this to fix it but no luck so if you can please point me in the right direction. // GO TO TOP BUTTON var goToTopTi = new TimelineMax({paused:true}); goToTopTi.to(window, 1, {scrollTo:{y:0}, ease:Power2.easeOut}); var isPressedGoToTop = 0; document.querySelector("#goToTopButton").addEventListener("click", function(){ if (isPressedGoToTop === 0) { goToTopTi.play().timeScale(1); isPressedGoToTop++; } else { goToTopTi.repeat().timeScale(1); } }); I also tried something similar with no "if" and just goToTopTi.play().timeScale(1); thinking it would simply play each time and no luck with that either. Thanks in advance for all your help, Tech Soul P.S. I am not using jquery on this site for speed reasons in case your thinking the answer is a jquery thing
  16. Hey there Since I am rather an amateur, I find it difficult to resolve the following issue: So I have this circle animation that moves on the left side of the page when clicked. Everything nice so far. However, the plan is to show the body of my page after I click and hide it again after I click the circle again, making the circle to come back on its initial size. I know that there should be some kind of procedure where i set some variables with the names of the div i want to show, but i do not know how to chain more animations and keep them under the click event that i have on the circle. The main idea of my website is that, when the user accesses it, he could see only the circle and, after he clicks it, the content of the page is showed. Something similar to this website: http://sergeymast.com/ (i know that most of his animations are in css but i want to improve my gsap skills along the way). Thanks in advance for the help, I really appreciate it!
  17. Hey guys! I am fairly new to GSAP and i am learning it by building stuff. I have an svg in the middle of the page and i would like it to animate to the left and then display the content of the page (which i did not coded yet). When the user clicks it again, i would like to return to its initial state and hide the content of the page. Throughout the past few hours, I tried various on click functions with if else statements but nothing seems to work. With the show/hide part of the content i will deal with it later, for the moment i would like to learn how to fix the clicking part. Thanks in advance!
  18. Hi guys! I have the following problem: There is a draggable with attached methods onPress and onRelease. The draggable component has a button child. When I click on the draggable but outside of the button both events get fired. But when i click on the button only the onPress event gets fired (you can check this in the browser console). Same result happens if I put an input as a child and click on it. Codepen: http://codepen.io/anon/pen/jqqyEQ I need a way to fire both onPress and onRelease events when I click on buttons and inputs that are children of the draggable component. Thanks in advance!
  19. Hello everybody I'm working on a media gallery that uses Draggable ('rotation') to navigate. It is has many dependencies. Therefore it's hard to reproduce a simple codepen version. But perhaps the problem rings any bells here: Firefox refuses to handle clicks/touches correctly inside the Draggable and its sub-elements. It is ONLY FIREFOX - on all platforms. I never thought I would ever say this but: “Even IE works fine!”. My desired Draggable settings are: a. dragClickables:true, b. allowEventDefault:false, I get a <button> element work when I change a or b or both. Whereas <button data-clickable =”true”> does not help at all. Whatever I do, the controls of a nested <video> never work in Firefox. Although the video works. It can be started with a right-click. It is only the 'click' event. All other events work (rollover, mousedown...). Even the 'click' partly works. An addEventListener ('click', funct) fires. But at the same time the CSS :active is ignored. The script works like a charm in all other target browsers. Even on the iPhone the videos (or better their stills) smoothly rotate and you can open them. When I disable( ) Draggable all comes back to life again. Has anyone ever experienced this kind of trouble in Firefox? Any hint is very appreciated.
  20. I read a lot of articles after I decided to make my own scrollable DisplayContainer in mobileStyle. There are a lot of people who had problems with clickable Items they want to scroll and here is my solution after coding a bit around to find a solution. The Class isn't optimized yet but for those who wants to start with a similar project it could help. Feedback or optimisations are really welcome. Cheers package ui.components { import flash.display.Sprite; import flash.display.DisplayObject; import com.greensock.BlitMask; import flash.events.Event; import com.greensock.plugins.TweenPlugin; import com.greensock.plugins.ThrowPropsPlugin; import flash.ui.Multitouch; import flash.ui.MultitouchInputMode; import flash.events.GestureEvent; import flash.events.TransformGestureEvent; import flash.events.MouseEvent; import fl.transitions.Tween; import fl.transitions.easing.Elastic; import fl.transitions.TweenEvent; public class ScrollableDisplayContainer extends Sprite { Multitouch.inputMode = MultitouchInputMode.GESTURE; TweenPlugin.activate([ThrowPropsPlugin]); protected const MIN_WIDTH:Number = 20; protected const MIN_HEIGHT:Number = 20; private var _width:Number; private var _height:Number; private var _mask:BlitMask; private var _maskHolder:Sprite; private var _maskContent:DisplayObject; private var _maskContentHolder:Sprite; private var hScroll:Boolean = false; private var vScroll:Boolean = false; private var scrollBarV:Sprite; private var scrollBarH:Sprite; private var enableScrolling:Boolean = false; private var allowScrolling:Boolean = false; private var startingPointX:Number; private var startingPointY:Number; private var scrollContentPadding:Number = 50; private var bounceAnimation:Tween; public function ScrollableDisplayContainer(width:Number, height:Number, content:DisplayObject, name:String = "content") { super(); this._width = width; this._height = height; this._maskContent = content; this._maskContent.name = name; if(!Multitouch.supportsGestureEvents) { throw new Error("This Device doesn't support GestureEvents, please go home ... nothing to see here"); } this.addEventListener(Event.ADDED_TO_STAGE, added); } public function changeContent(content:DisplayObject, name:String = "content"):void { _maskContentHolder.removeChild(_maskContent); _maskContent = content; _maskContentHolder.addChild(_maskContent) } private function added(e:Event):void { this.removeEventListener(Event.REMOVED, removed); init(); } private function removed(e:Event):void { this.removeEventListener(Event.REMOVED, removed); _mask.dispose(); _mask = null; if (enableScrolling) { this.removeEventListener(TransformGestureEvent.GESTURE_SWIPE, scrollFast); this.removeEventListener(MouseEvent.MOUSE_DOWN, scroll); allowScrolling = true; } } private function init():void { _maskHolder = new Sprite(); this.addChild(_maskHolder); _maskContentHolder = new Sprite(); _maskHolder.addChild(_maskContentHolder); _maskContentHolder.addChild(_maskContent); _mask = new BlitMask(_maskContentHolder); _mask.x = 0; _mask.y = 0; _mask.width = this._width; _mask.height = this._height; _mask.bitmapMode = false; _mask.autoUpdate = true; setScroller(); } private function setScroller():void { _maskContent.width > _mask.width ? drawScrollBarH() : 0; _maskContent.height > _mask.height ? drawScrollBarV() : 0; if (enableScrolling) { allowScrolling = true; this.addEventListener(TransformGestureEvent.GESTURE_SWIPE, scrollFast); this.addEventListener(MouseEvent.MOUSE_DOWN, scroll); } } private function drawScrollBarH():void { enableScrolling = true; hScroll = true; var barWidth:Number = _mask.width/(_maskContentHolder.width/_mask.width); scrollBarH = new Sprite; scrollBarH.graphics.lineStyle(0, 0x333333); scrollBarH.graphics.beginFill(0x333333, 1); scrollBarH.graphics.drawRoundRect(0, 0, barWidth, 4, 3, 3); scrollBarH.graphics.endFill(); this.addChild(scrollBarH); scrollBarH.alpha = 0; scrollBarH.x = 1; scrollBarH.y = _mask.height - scrollBarH.height-1; } private function drawScrollBarV():void { enableScrolling = true; vScroll = true; var barHeight:Number = _mask.height/(_maskContentHolder.height/_mask.height); scrollBarV = new Sprite; scrollBarV.graphics.lineStyle(0, 0x333333); scrollBarV.graphics.beginFill(0x333333, 1); scrollBarV.graphics.drawRoundRect(0, 0, 4, barHeight, 3, 3); scrollBarV.graphics.endFill(); this.addChild(scrollBarV); scrollBarV.alpha = 0; scrollBarV.x = _mask.width - scrollBarV.width-1; scrollBarV.y = 1; } private function scrollFast(t:TransformGestureEvent):void { t.offsetX == -1 && hScroll && allowScrolling ? scrollFastToLeft() : 0; t.offsetX == 1 && hScroll && allowScrolling ? scrollFastToRight() : 0; t.offsetY == 1 && vScroll && allowScrolling ? scrollFastDown() : 0; t.offsetY == -1 && vScroll && allowScrolling ? scrollFastUp() : 0; } private function scrollFastToLeft():void { hScroll ? scrollBarH.alpha = 0.3 : 0; _maskContentHolder.x = Math.max( _maskContentHolder.x - (_maskContentHolder.width/3), (_maskContentHolder.width-_mask.width)*-1 ); if (_maskContentHolder.x < (_maskContentHolder.width-_mask.width)*-1) { _maskContentHolder.x = (_maskContentHolder.width-_mask.width)*-1; } scrollBarH.x = calcScrollBarXaxis(); checkFinish(); } private function scrollFastToRight():void { hScroll ? scrollBarH.alpha = 0.3 : 0; _maskContentHolder.x = Math.min(_maskContentHolder.x + (_maskContentHolder.width/3), 0); if (_maskContentHolder.x > 0) { _maskContentHolder.x = 0; } scrollBarH.x = calcScrollBarXaxis(); checkFinish(); } private function scrollFastDown():void { vScroll ? scrollBarV.alpha = 0.3 : 0; _maskContentHolder.y = _maskContentHolder.y + (_maskContentHolder.height/3); if (_maskContentHolder.y > scrollContentPadding) { _maskContentHolder.y = scrollContentPadding; } scrollBarV.y = calcScrollBarYaxis(); checkFinish(); } private function scrollFastUp():void { vScroll ? scrollBarV.alpha = 0.3 : 0; _maskContentHolder.y = _maskContentHolder.y - (_maskContentHolder.height/3); if (_maskContentHolder.y < (_maskContentHolder.height-_mask.height+scrollContentPadding)*-1) { _maskContentHolder.y = (_maskContentHolder.height-_mask.height+scrollContentPadding)*-1; } scrollBarV.y = calcScrollBarYaxis(); checkFinish(); } private function scroll(m:MouseEvent):void { if (allowScrolling) { allowScrolling = false; startingPointX = m.stageX; startingPointY = m.stageY; this.addEventListener(MouseEvent.MOUSE_UP, endScrolling); this.addEventListener(MouseEvent.MOUSE_MOVE, scrollToDirection); } } private function endScrolling(m:MouseEvent):void { this.removeEventListener(MouseEvent.MOUSE_UP, endScrolling); this.removeEventListener(MouseEvent.MOUSE_MOVE, scrollToDirection); checkFinish(); _mask.bitmapMode = false; } private function checkFinish():void { hScroll ? scrollBarH.alpha = 0 : 0; vScroll ? scrollBarV.alpha = 0 : 0; if (_maskContentHolder.y < (_maskContentHolder.height-_mask.height)*-1) { startAnimation("y", _maskContentHolder.y, (_maskContentHolder.height-_mask.height)*-1); } else if (_maskContentHolder.y > 0) { startAnimation("y", _maskContentHolder.y, 0); } else { allowScrolling = true; } } private function startAnimation(axis:String, start:Number, end:Number):void { bounceAnimation = new Tween(_maskContentHolder, axis, Elastic.easeOut, start, end, 1, true); bounceAnimation.addEventListener(TweenEvent.MOTION_FINISH, animationFinished); } private function animationFinished(t:TweenEvent):void { bounceAnimation.removeEventListener(TweenEvent.MOTION_FINISH, animationFinished); allowScrolling = true; } private function scrollToDirection(m:MouseEvent):void { m.stageX < startingPointX ? scrollLeft(m.stageX, m.stageY) : 0; m.stageX > startingPointX ? scrollRight(m.stageX, m.stageY) : 0; m.stageY < startingPointY ? scrollUp(m.stageX, m.stageY) : 0; m.stageY > startingPointY ? scrollDown(m.stageX, m.stageY) : 0; } private function setNewStartingCoordinates(xPos:Number, yPos:Number):void { startingPointX = xPos; startingPointY = yPos; } private function calcScrollBarXaxis():Number { var cont:Number = (_maskContentHolder.width+_maskContentHolder.x)-_mask.width; var base:Number = _maskContentHolder.width-_mask.width; var max:Number = _mask.width - scrollBarH.width; var act:Number = cont*max/base; return Math.floor(max - act); } private function calcScrollBarYaxis():Number { var cont:Number = (_maskContentHolder.height+_maskContentHolder.y)-_mask.height; var base:Number = _maskContentHolder.height-_mask.height; var max:Number = _mask.height - scrollBarV.height; var act:Number = cont*max/base; var ret:Number = Math.floor(max - act); ret < 0 ? ret = 0 : 0; ret > max ? ret = max : 0; return ret; } private function scrollLeft(xPos:Number, yPos:Number):void { _mask.bitmapMode = true; hScroll ? scrollBarH.alpha = 0.3 : 0; setNewStartingCoordinates(xPos, yPos); _maskContentHolder.x = _maskContentHolder.x -3; if (_maskContentHolder.x < (_maskContentHolder.width-_mask.width)*-1) { _maskContentHolder.x = (_maskContentHolder.width-_mask.width)*-1; } scrollBarH.x = calcScrollBarXaxis(); } private function scrollRight(xPos:Number, yPos:Number):void { _mask.bitmapMode = true; hScroll ? scrollBarH.alpha = 0.3 : 0; setNewStartingCoordinates(xPos, yPos); _maskContentHolder.x = _maskContentHolder.x +3; if (_maskContentHolder.x > 0) { _maskContentHolder.x = 0; } scrollBarH.x = calcScrollBarXaxis(); } private function scrollUp(xPos:Number, yPos:Number):void { _mask.bitmapMode = true; vScroll ? scrollBarV.alpha = 0.3 : 0; setNewStartingCoordinates(xPos, yPos); _maskContentHolder.y = _maskContentHolder.y -3; if (_maskContentHolder.y < (_maskContentHolder.height-_mask.height+scrollContentPadding)*-1) { _maskContentHolder.y = (_maskContentHolder.height-_mask.height+scrollContentPadding)*-1; } scrollBarV.y = calcScrollBarYaxis(); } private function scrollDown(xPos:Number, yPos:Number):void { _mask.bitmapMode = true; vScroll ? scrollBarV.alpha = 0.3 : 0; setNewStartingCoordinates(xPos, yPos); _maskContentHolder.y = _maskContentHolder.y +3; if (_maskContentHolder.y > scrollContentPadding) { _maskContentHolder.y = scrollContentPadding; } scrollBarV.y = calcScrollBarYaxis(); } } } Usage: import flash.display.Sprite; import ui.components.ScrollableDisplayContainer; import flash.events.MouseEvent; var a:Sprite = new Sprite(); a.graphics.lineStyle(0, 0xFF0000); a.graphics.beginFill(0xFF0000, 1); a.graphics.drawRect(0, 0, 1000, 800); a.graphics.endFill(); var aa:Sprite = new Sprite(); aa.graphics.lineStyle(0, 0xFF0000); aa.graphics.beginFill(0x00FF00, 1); aa.graphics.drawRect(0, 0, 1000, 500); aa.graphics.endFill(); aa.buttonMode=true; aa.addEventListener(MouseEvent.CLICK, clicked); function clicked(m:MouseEvent):void { trace ('clicked: '+m.target); } var c:Sprite = new Sprite(); c.addChild(a); a.x = 0; a.y = 0; c.addChild(aa); aa.x = 0; aa.y = 200; var b:ScrollableDisplayContainer; b = new ScrollableDisplayContainer(600, 560, c); addChild(;
  21. Hi, I'm really new to all this and this is my second post. I'm trying to do something I thought was simple, but something does not work. I have two div (#red and #blue) and two buttons (#opacity1 and #opacity2), clicking the first button will increase the opacity of the first div while decreasing the opacity of the second div and vice versa. The code I'm using doesn't seems to work, can someone help? Thanks UPDATE: There's an error in the code, sorry!!! .to("#blue", 0.1, { opcity: "+=0.1" }, "0"); should be .to("#blue", 0.1, { opacity: "+=0.1" }, "0"); (opacity instead of opcity) and now seems to works. Anyway, am I doing this correctly? or there is a better way? Thanks. $('#opacity1').click(function() { var tl1 = new TimelineMax(); tl1.to("#red", 0.1, {opacity: "-=0.1" }, "0") .to("#blue", 0.1, { opacity: "+=0.1" }, "0"); }); $('#opacity2').click(function() { var tl2 = new TimelineMax(); tl2.to("#red", 0.1, {opacity: "+=0.1" }, "0") .to("#blue", 0.1, { opacity: "-=0.1" }, "0"); });
  22. eliajf

    Click test distance

    Is there a way to change the click test from 3px to something greater? I'm finding in Android browsers that a Draggable object is hard to click because it has a tendency to move a very short distance when I tap the field. On most mobile browsers, 3px is extemely tiny because of retina displays, thus a larger pixel range would be beneficial.
  23. Anna

    click on animationend

    Hallo, I''m trying to get two followup clicks with different output running. First click should trigger the animation. After the animation has ended, a second click shouldn't trigger the animation again but open aURL. codepen: http://codepen.io/anon/pen/daeuC thank you for help!
  24. I am trying to set up a slider that when you click the right arrow it moves the slider to the left -750px. I can get it to do it once but need it to move -750px everytime I click the arrow. In jquery .animate I can set it to -=750px and everytime I click the arrow it moves it over -750px. Is there a way I can do that with tweenlite. Here is my code.... $(document).ready(function() { $('#Rt-arrow').click(function() { TweenLite.to('#slider', 2, {x:-750}); });// end click });// end ready
  25. Hi Everyone, Been using greensock for a couple of months now. I finally got us to upgrade to the newest version and some things are different. My issues is we have a main big timeline that our animation runs on. There are points in it when we pause the timeline and people need to click on stuff and other animations happens. After they click everything they need to we restart the main timeline. The click functions have their own timeline with tweens in them. Well on the newer version we are using, when we resume the main timeline it ignores the css/tweens that happen in the click timeline. It restarts like the clicks animations never happen. Before on the older version we used that didn't happen. I'm seeing if there is a way to have a main timeline and have it keep the css and animtaion end tween from click on resume of the main timeline. I hope this makes sense. Thanks.