[ScrollToPlugin Stopped working after upgrade to 1.11.0]

Hi there

 

I updated to the latest version but get an error on line 12 in the scrollto plugin file:

 

Uncaught TypeError: Object function (a, c, b, j) { return new C(a, c, b, j) } has no method 'plugin'

 

Is there something i need to amend in my js code when calling this function?

 

Example code: 

            (function itineraryScroll() {

                var scrollSection = 1;

                    $("a.nextDay").click(function(e){
                      e.preventDefault();
                      if(scrollSection < 20){
                        scrollSection++;
                      }
                      TweenMax.to(window, 0.5, {scrollTo:{y:$("#itinerary-day-" + scrollSection).offset().top-100}});
                    });

                    $("a.prevDay").click(function(e){
                      e.preventDefault();
                      if(scrollSection > 1){
                        scrollSection--;
                        TweenMax.to(window, 0.5, {scrollTo:{y:$("#itinerary-day-" + scrollSection).offset().top-100}});
                      }
                    });
            })();

Only testing this locally but can put on a live link if need be.

 

Many thanks for any help

 

M

[Deep link to slide within slideshow]

That is SO much better  !! I was hoping to add the updated navigation style like you've done with the currentTab function - this is fantastic. Thank you so much for your help. Now I am off to study your code 

[Deep link to slide within slideshow]

Apologies, I did not mean deeplinking in regards to the url change, just accessing a particular slide within the list as opposed to mapping the div classes to a list. The code is based on a codepen by Greensock 

See the Pen iLosa by GreenSock (@GreenSock) on CodePen

 

If you have any better ways of achieving this that would be great

[Deep link to slide within slideshow]

Hi there 

 

I have a nav that links to slides with tweens in between. The slideshow navigation works fine by loading each slide according to it's position on the list. See the following pen

 

See the Pen ruHhD by mulegoat (@mulegoat) on CodePen

 

The problem I'm having is trying to link to a certain slide from within each slide. Using the following code works on all but one "Link to page 2" link - in this case, the link within the first slide - but on my localhost its slide 5 where the link fails.

 

I know this is more of a jquery issue but though I'd put it up here incase somebody had a better way of doing this with getElementById or something else.

 

Many thanks for any help

function initActionPlan() {
	  $(".actionPlanLink").each(function(index, element) {
	    $(this).on("click", gotoActionSection);
	  });
	}



	function gotoActionSection(e) {
	  if(currentSectionNum != $(e.currentTarget).index()){
				if(currentSection) {
					TweenLite.to(currentSection, 0.5, {autoAlpha:0});
				}
				currentSection = $(".tabsContainer")[1];
				TweenLite.to(currentSection, 0.2, {autoAlpha:1});

	  }

	}

	//OpenClose Action Plan

	function actionInit(){
	  initActionPlan();
	  $(".actionPlanLink")[1].click();
	}

	actionInit();  

[Animating a number count using DOM element]

HI Rodrigo,

 

Many thanks for your help. This does work now, but would prefer to store the value as a variable like you say, without the data method. The value in the XML file is serialized via XSL transformation, not Ajax so it already resides in the DOM on page load, I just wanted to animate the number, so I've hidden the value in 'wellness-score' using css, and want to pass it to display #score - at least that was the original thinking. 

 

If you have any other suggestions that would be awesome! 

[Animating a number count using DOM element]

Hi Rodrigo

 

Many thanks for your help but still no joy? Have switched the objects around but still no tween. Any other suggestions?

[Animating a number count using DOM element]

<div id="score">0</div>
<div alias="N30" class="wellness-score">63</div>

        var endScore = $(".wellness-score").data(); 
        var startScore = {score:0},
                scoreDisplay = $("#score");

        //use endScore as the end value of your tween
                    
        $(window).load(function(){
                TweenLite.to(endScore, 5, {score:startScore, roundProps:"score", onUpdate:updateHandler});
        }); 
                
        function updateHandler() {
                scoreDisplay.text(startScore.score);
        }

This is the code I have so far with an example of a value supplied in the DOM within the class "wellness-score". I've tried to use a data method but nothing happens. 

[Animating a number count using DOM element]

That's it exactly it, need to retrieve the value of the end score which is unknown until it's added to the DOM following the xsl transformation, but rather than display it statically I'd like to animate from 0 to the end value. Not sure if this is declared as a variable or not?

[Animating a number count using DOM element]

Many thanks Carl,

 

This example works fine, one question though, how would I tween the value of var startScore (which is set 0), to var endScore (which is contained in a DOM element)?

[Animating a number count using DOM element]

Hi there

 

I am trying to setup an animated score count effect. I want the number to be a variable with the number value taken from a div (the div takes the value from user generated data via XML-XSL transformation). It's a percentage so scores of 1 - 100 only. I'm also trying to create a loader effect where a div container's background colour is filled up using the same percentage value.

 

I have a jQuery solution but would like to use GSAP if possible. Any ideas on where to start with this? Should I be looking at setting this up as a Timeline with the value linked to something like 'totalProgress()' as in the demo?

 

Many thanks for any help

[Tween conflicts on overlapping Movieclips]

Hello there!

 

I'm having problems when a ROLL_OVER / ROLL_OUT if the mouse is placed on the stage at a point where these two movieclips overlap. Flash fires both tweens repeatedly.

 

All I am trying to do is fire the movieclip instance title_mc once I ROLL_OVER the moveclip 'btn_mc'

 

Any suggestions?

 

stop();

import com.greensock.*;
import com.greensock.easing.*;
import com.greensock.plugins.*;

OverwriteManager.init(2)

TweenPlugin.activate([AutoAlphaPlugin]);

btn_mc.buttonMode = true

TweenMax.to(btn_mc, 0.5, { autoAlpha:0.25, ease:Circ.easeOut } );

		btn_mc.addEventListener (MouseEvent.CLICK, buttonClickHandler);
		btn_mc.addEventListener(MouseEvent.ROLL_OVER, over1);
		btn_mc.addEventListener(MouseEvent.ROLL_OUT, out1);





function over1(event:MouseEvent):void {
		TweenMax.to(btn_mc, 0.5, {alpha:1, ease:Circ.easeOut});
		TweenMax.to(title_mc, 0.25, {y:111, alpha:1, ease:Circ.easeOut});



	}

function out1(event:MouseEvent):void {
		TweenMax.to(btn_mc, 0.25, {alpha:0.25, ease:Circ.easeOut});
		TweenMax.to(title_mc, 0.25, {y:165, alpha:0, ease:Circ.easeOut});

	}