Remove container holding animation after it's been played

Using JavaScript with Hype
1

Hi,
I have a page that contains a simple animation (zooming in on an image) and it works as expected. The same page has lots of other stuff. I’d like to remove the container that holds the animation once it’s done playing.

I’m attaching a Javascript to a keyframe I’ve placed on the last frame of the animation. The script calls hypeDocument.getElementById(id), and for the ID, I’ve put in the name of the container. The line (which doesn’t work) is this:
hypeDocument.getElementById(‘keatsc1zoom_hype_container’).remove;

I’d appreciate any suggestions for removing “keatsc1zoom_hype_container”. I’d prefer that to setting its visibilty to hidden.

Many thanks.
Arnie

2

Try using…

hypeDocument.getElementById('keatsc1zoom_hype_container').outerHTML = ''
1 Like
3

That did the trick, Greg. Thank you very, very much. You’ve saved me much grief.

Best,
Arnie

1 Like
4

I like this forum :relaxed:
I am trying to combine the “Starting an animation by scrolling to it with Jquery Waypoints” and to disable the effect after it has been played. I did try

$('#trigger1').waypoint (function(){
	hypeDocument.startTimelineNamed('event1');
}, { offset: 'bottom-in-view' });
	hypeDocument.getElementById('trigger1').outerHTML = '';

which removes the effect before it is played. Could you help me whith the code I should add for the event1 to play only once?

5

I found a way, that is probably not the most elegant one, but it works; I just create another trigger that removes the first one. Of course, the box trigger2 must be below box trigger1

	$('#trigger1').waypoint (function(){
	hypeDocument.startTimelineNamed('event1');
        }, { offset: 'bottom-in-view' });

        $('#trigger2').waypoint (function(){
	hypeDocument.getElementById('trigger1').outerHTML = '';
        }, { offset: 'bottom-in-view' });
1 Like