[Published NPM package with shockingly]

No I didn’t because it didn’t work 🙂

But of course I get your point and making it a private repo and a private package is fine which would also solve the problem so thank you. 

[Published NPM package with shockingly]

Thanks, but that's not the issue here.

 

I have published an NPM package where I'm using bonus plugins.

 

When I try to install that package with "npm install my-package" I get the errors mentioned in the first post.

[Published NPM package with shockingly]

I just bought the Premium Club level because I want to publish an NPM package that uses the Draggable and Inertia plugins.

I believe I'm allowed to do that right?

 

I'm confused about how to add it to my project. If I add it with the

npm install gsap@npm:@gsap/shockingly

And add the .npmrc file with the token.

After I publish it and try to install in a new project with "npm install my-package" I get an error saying "@gsap/shockingly@^3.12.5' is not in the npm registry."
I guess that is because the .npmrc file is not published, which is a bad idea to do because that has my token in it.

 

If I try to use the downloaded files I would have to publish the file to the repo and sine that is a public repo it would be available to eveyone to download, including the bonus stuff.

 

How do I do this?

[Draggable update snap]

Aha, for anyone finding this.

Updating the transform on resize with gsap instead of native resolves it.

gsap.set(nav, {x: getInPoint()});

 

[Draggable update snap]

I have element which is draggable. On resize I change the transform and I change the draggable.vars with new snap points and call draggable.update()

I thought that would update the snap values.

But what happens is that it jumps when I start dragging after a resize.

 

So here's a Codepen. Try and click toggle to open it. Then you can drag it back out.

But if you resize the window after you've opened it, and then try an drag the element jumps to the old position.

What am I doing wrong?

 

See the Pen BabddVY?editors=1111 by tfl (@tfl) on CodePen

[Shaking centered text on parent width animation]

Very nice Rodrigo - works beautifully 

Thank you to you too Jonathan.

[Shaking centered text on parent width animation]

As you can se in the Codepen the centered text is shaking when the width of the parent element is animated.

Any ideas on how to fix that?

[Change img src over time?]

I know what you mean. I can't animate the actual change between the images - that's impossible.

 

But that is not what I needed. The change between all the source images should happen over fx. 1 second so that it shows each image within that timeframe and ends on the last one.

 

But I figured it out in the meantime - this is my code boiled down.

<div class="storyNumber" no="0"><img src=""></div>

function updateNumber() {
    var no = $storyNumber.attr('no');
    var $img = $storyNumber.find('img');
    $img.attr('src', 'http://localhost/images/number_' + numberArray[no] + '.png');        
}

var numberArray = [0, 127, 89, 80, 8, 200, 20, 87, 3]; 
var $storyNumber = $('.storyNumber'); 
TweenMax.to($storyNumber, 1.2, {
    ease:Power4.easeInOut,
    attr:{no:10}, roundProps:'attr',
    onUpdate: updateNumber,
    onComplete: function() { $storyNumber.attr('no', 0); }
});

[Change img src over time?]

...and if so how?

 

What I need to do is over time (and with an ease if possible) change the src of an img tag between 10 different images that I have in an array (either the path to them or the images created by js).

 

I see there's a new attr plugin - is that what I need?

[Timeline progress weird]

Ahh great - thanks Jack

[Timeline progress weird]

I'm just starting using this library for real so I'm asking a lot of questions these days  - thank you for answering.

 

Look at this Codepen and try to play it till the end. Then try and hit the "progress 0.5" button which sets the progress on the timelime to 0.5 and then read out the progress by hitting "get progress".

It reads out 0.66666. Why is that?

 

If you hit "progress 0.5" again and read out the progress it now says 0.5 as I would expect.

See the Pen texlC by anon (@anon) on CodePen

[Timeline help]

So it was the pauses - thank you Carl.

 

Guess I could also add a small number to the pauses?...like this:

tween.addPause("+=0.00001");

[Timeline help]

I have a timeline which I need to be able to reverse and redo when the browser is resized because some of the tween values are set to window height.

The issue I have is after a resize where I do a seek. The next time I goNext() the animation doesn't play.

Is it the pauses?

 

What am I doing wrong or is there are smarter way?

var tween, currentNo;

function createTween() {
    tween = new TimelineMax({paused:true});
    tween.addLabel('0');
    tween.add( TweenMax.fromTo($images, 1, {y:0}, { y:(-1 * $(window).height() }));
    tween.addPause();
    tween.addLabel('1');
    tween.add( TweenMax.to($images.find('.image-blurred'), 1, { opacity:1 }));
    tween.addPause();
    tween.addLabel('2');
    tween.add( TweenMax.to($images, 1, { y:(-2 * $(window).height() }));
    tween.addLabel('3');

    
    tween.seek((currentNo.toString()));
}

function onResize() {
    createTween();
}


function goNext() {
    if (currentNo === 3) return;
    tween.play();
    currentNo++;
}

function goPrev() {
    if (currentNo === 0) return;
    tween.reverse();
    currentNo--;
}

[Updating hover on tween]

There seems to be an agreement to this being a browser bug.

If anyone else finds this a need a fix there is a work around here:

http://stackoverflow.com/questions/24787618/hover-not-working-on-animated-div

[Can't get updateTo to work]

Thanks Carl

[Can't get updateTo to work]

Look at this:

See the Pen tvKjq by anon (@anon) on CodePen

 

Why doesn't the box go back to 0?

 

 

 

And while we'er at it - why does the box insist on going to 550px here:

See the Pen kygIj by anon (@anon) on CodePen

[Updating hover on tween]

Thank you Chrysto - don't know what happened to my Codepen.

And yes that is what I meant

[Updating hover on tween]

The red box in this example has a hover effect on the css.

See the Pen aHepz by anon (@anon) on CodePen

 

The thing is this only works if the mouse is moving on the red box; not when thw box itself moves under the mousepointer (leave the mouse in the path of the box).

This is probably not a Tweenlite issue but a js question.

 

How do I fix that?

 

 

[TransformAroundPoint and Starling]

Thanks - I'll do that.

[TransformAroundPoint and Starling]

I'm trying to use the TransformAroundPoint on a Starling Sprite but it fails.

 

I'm not sure what exactly TransformAroundPoint does internally, but I guess it uses some properties that are not there on a Starling Sprite ?

 

The error is:

TransformAroundPointPlugin/onInitTween()[D:\_Flash\_AS3\src\com\greensock\plugins\TransformAroundPointPlugin.as:71]

[onChildComplete]

I honestly don't know why it didn't work but I somehow fixed it now - thanks anyway Jack

[onChildComplete]

I don't understand why nothing gets traced in my onChildComplete function.

What am I doing wrong?

 

urls = ["http://www.server.com/1.jpg", "http://www.server.com/2.jpg"];
var queue:LoaderMax = LoaderMax.parse(urls, {name:"mainQueue", onChildComplete:completeHandler});
queue.load();


function completeHandler(e:LoaderEvent) : void {
var content:ContentDisplay = e.target.content;
trace(content);
}

[[SOLVED] Timeline gotoAndStop + label]

Fantastic support!.....thank you Carl for your perseverance and actually finding a solution. Good to know it wasn't me being stupid.

 

And thank you Jack for fixing it so quickly. You're the best....and no explanation needed

[[SOLVED] Timeline gotoAndStop + label]

Thanks Carl, sorry for the late reply but forgot to subscribe to the thread.

[[SOLVED] Timeline gotoAndStop + label]

I have a Timeline with some steps. In the end I want it to go back to the first label and then continue through the other steps.

But when I gotoAndStop("START") and then try to restart the timeline the next animation is wrong,

 

Kinda hard to explain, but I have attached a zip that I think shows the "error" well.